blog/src/components/Navbar.astro

---
const pathname = Astro.url.pathname;

const links = [
  { href: "/", label: "home" },
  { href: "/blog", label: "blog" },
  { href: "/notes", label: "infosec notes" },
  { href: "/projects", label: "projects" },
];

function isActive(href: string) {
  if (href === "/") return pathname === "/";
  return pathname.startsWith(href);
}
---

<header
  class="fixed top-0 left-0 right-0 z-[60] h-12 flex items-center px-5"
  style="background: oklch(0% 0 0 / 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid oklch(22% 0 0);"
>
  <div
    class="flex items-center justify-between w-full max-w-screen-2xl mx-auto"
  >
    <a
      href="/"
      class="font-mono text-sm text-base-content/40 hover:text-primary transition-colors duration-200 tracking-tight"
    >
      ~/hadi
    </a>

    <div
      id="oneko-track"
      transition:persist
      class="flex-1 relative h-12 pointer-events-none"
    >
    </div>

    <nav class="hidden md:flex items-center">
      {
        links.map((link) => (
          <a
            href={link.href}
            class:list={[
              "font-mono text-xs px-3 py-1.5 transition-colors duration-150",
              isActive(link.href)
                ? "text-primary"
                : "text-base-content/40 hover:text-base-content/80",
            ]}
          >
            {isActive(link.href) ? (
              <span class="flex items-center gap-1">
                <span class="inline-block w-1 h-1 rounded-full bg-primary" />
                {link.label}
              </span>
            ) : (
              link.label
            )}
          </a>
        ))
      }
    </nav>

    <button
      id="hamburger"
      class="md:hidden flex flex-col gap-1 p-2 text-base-content/40 hover:text-base-content/70 transition-colors"
      aria-label="Toggle menu"
    >
      <span
        class="hamburger-line block w-4 h-px bg-current transition-all duration-200"
      ></span>
      <span
        class="hamburger-line block w-4 h-px bg-current transition-all duration-200"
      ></span>
      <span
        class="hamburger-line block w-4 h-px bg-current transition-all duration-200"
      ></span>
    </button>
  </div>
</header>

<div
  id="mobile-menu"
  class="hidden fixed inset-x-0 top-12 z-[59] md:hidden border-b border-base-300/60 py-2"
  style="background: oklch(2% 0 0 / 0.97); backdrop-filter: blur(12px);"
>
  {
    links.map((link) => (
      <a
        href={link.href}
        class:list={[
          "flex items-center gap-2 font-mono text-sm px-5 py-2.5 transition-colors",
          isActive(link.href)
            ? "text-primary"
            : "text-base-content/45 hover:text-base-content/80",
        ]}
      >
        {isActive(link.href) && (
          <span class="inline-block w-1 h-1 rounded-full bg-primary shrink-0" />
        )}
        {link.label}
      </a>
    ))
  }
</div>

<script>
  function init() {
    const btn = document.getElementById("hamburger");
    const menu = document.getElementById("mobile-menu");
    if (!btn || !menu) return;
    const lines = btn.querySelectorAll<HTMLElement>(".hamburger-line");
    let open = false;
    menu.style.display = "none";
    lines[0].style.transform = "";
    lines[1].style.opacity = "";
    lines[2].style.transform = "";

    btn.addEventListener("click", () => {
      open = !open;
      menu.style.display = open ? "block" : "none";
      lines[0].style.transform = open ? "translateY(5px) rotate(45deg)" : "";
      lines[1].style.opacity = open ? "0" : "";
      lines[2].style.transform = open ? "translateY(-5px) rotate(-45deg)" : "";
    });

    document.addEventListener("click", (e) => {
      if (
        open &&
        !btn.contains(e.target as Node) &&
        !menu.contains(e.target as Node)
      ) {
        open = false;
        menu.style.display = "none";
        lines[0].style.transform = "";
        lines[1].style.opacity = "";
        lines[2].style.transform = "";
      }
    });
  }

  document.addEventListener("astro:page-load", init);
</script>