add notes

Signed-off-by: Hadi <hadi@example.com>

src/components/Navbar.astro

@@ -0,0 +1,125 @@
+---
+const pathname = Astro.url.pathname;
+
+const links = [
+  { href: "/", label: "home" },
+  { href: "/blog", label: "blog" },
+  { href: "/notes", label: "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-50 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-xl mx-auto">
+    <a
+      href="/"
+      class="font-mono text-sm text-base-content/40 hover:text-primary transition-colors duration-200 tracking-tight"
+    >
+      ~/hadi
+    </a>
+
+    <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-40 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;
+
+    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>