atri.dad/islands/NavigationBar.tsx

// islands/NavigationBar.tsx
import { useComputed, useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
import { LuCodeXml, LuHouse, LuNotebookPen } from "@preact-icons/lu";

interface NavigationBarProps {
  currentPath: string;
}

export default function NavigationBar({ currentPath }: NavigationBarProps) {
  const isScrolling = useSignal(false);
  const prevScrollPos = useSignal(0);
  const isVisible = useComputed(() => {
    if (prevScrollPos.value < 50) return true;

    const currentPos = typeof window !== "undefined" ? globalThis.scrollY : 0;
    return prevScrollPos.value > currentPos;
  });

  const isPostsPath = (path: string) => {
    return path.startsWith("/posts") || path.startsWith("/post/");
  };

  useEffect(() => {
    let scrollTimer: number | undefined;

    const handleScroll = () => {
      isScrolling.value = true;
      prevScrollPos.value = globalThis.scrollY;

      if (scrollTimer) clearTimeout(scrollTimer);

      scrollTimer = setTimeout(() => {
        isScrolling.value = false;
      }, 200);
    };

    globalThis.addEventListener("scroll", handleScroll);

    return () => {
      globalThis.removeEventListener("scroll", handleScroll);
      if (scrollTimer) clearTimeout(scrollTimer);
    };
  }, []);

  return (
    <div
      class={`fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 transition-all duration-300 ${
        isScrolling.value ? "opacity-30" : "opacity-100"
      } ${isVisible.value ? "translate-y-0" : "translate-y-20"}`}
    >
      <ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg gap-2">
        <li>
          <a href="/" class={currentPath === "/" ? "menu-active" : ""}>
            <div class="tooltip" data-tip="Home">
              <LuHouse class="text-xl" />
            </div>
          </a>
        </li>
        <li>
          <a
            href="/posts"
            class={isPostsPath(currentPath) ? "menu-active" : ""}
          >
            <div class="tooltip" data-tip="Posts">
              <LuNotebookPen class="text-xl" />
            </div>
          </a>
        </li>
        <li>
          <a
            href="/projects"
            class={currentPath.startsWith("/projects") ? "menu-active" : ""}
          >
            <div class="tooltip" data-tip="Projects">
              <LuCodeXml class="text-xl" />
            </div>
          </a>
        </li>
      </ul>
    </div>
  );
}