feat(header): improve mobile menu UX with overlay and transitions (#49)

* update dev_notes

* ✨ feat: header (ui): improve mobile menu UX with overlay and transitions

- File(s) changed:
  - src/components/Header.astro
- Nature of changes: UX enhancement
- Purpose: Make mobile menu behavior more natural and intuitive
- Impact: Menu closes on outside click, backdrop blur focuses attention, smooth fade transitions, theme toggle closes menu

Author: pascalandy

dev_notes/backlog.md

@@ -29,35 +29,6 @@ Add MCP
 
 https://docs.astro.build/en/guides/build-with-ai/
 
-=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=
-
-So when I build, sometimes I see these warnings. 
-
-What do I need to know ? Should I fix something about it? 
-
---
-
-Result (57 files): 
-- 0 errors
-- 0 warnings
-- 0 hints
-
-14:55:40 [content] Syncing content
-14:55:40 [content] Synced content
-14:55:40 [types] Generated 241ms
-14:55:40 [build] output: "static"
-14:55:40 [build] mode: "static"
-14:55:40 [build] directory: /Users/andy16/Documents/github_local/pascalandy-blog-paper/dist/
-14:55:40 [build] Collecting build info...
-14:55:40 [build] ✓ Completed in 250ms.
-14:55:40 [build] Building static entrypoints...
-14:55:41 [WARN] [vite] "matchHostname", "matchPathname", "matchPort" and "matchProtocol" are imported from external module "@astrojs/internal-helpers/remote" but never used in "node_modules/astro/dist/assets/utils/remotePattern.js" and "node_modules/astro/dist/assets/services/service.js".
-14:55:41 [assets] Copying fonts (12 files)...
-14:55:42 [vite] ✓ built in 1.57s
-14:55:42 [build] ✓ Completed in 1.60s.
-
-
-
 =—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=—=
 
 Some posts have a section at the end called : "Share this post on:"

src/components/Header.astro

@@ -74,12 +74,13 @@ const isActive = (path: string) => {
       <ul
         id="menu-items"
         class:list={[
-          "hidden",
+          "pointer-events-none opacity-0",
           "absolute top-full right-0 z-40 mt-2",
           "flex flex-col gap-1 p-4",
           "w-48 rounded-lg border border-border bg-background shadow-lg",
+          "transition-opacity duration-150",
           "[&>li>a]:block [&>li>a]:p-3 [&>li>a]:font-medium [&>li>a]:hover:text-accent sm:[&>li>a]:px-2 sm:[&>li>a]:py-1",
-          "sm:relative sm:top-auto sm:right-auto sm:z-auto sm:mt-0",
+          "sm:pointer-events-auto sm:relative sm:top-auto sm:right-auto sm:z-auto sm:mt-0 sm:opacity-100",
           "sm:flex sm:w-auto sm:flex-row sm:items-center sm:gap-x-5 sm:gap-y-0",
           "sm:border-0 sm:bg-transparent sm:p-0 sm:shadow-none",
         ]}
@@ -172,25 +173,62 @@ const isActive = (path: string) => {
   </div>
 </header>
 
+<!-- Mobile menu backdrop overlay -->
+<div
+  id="menu-overlay"
+  class="pointer-events-none fixed inset-0 z-30 bg-background/60 opacity-0 backdrop-blur-sm transition-opacity duration-150 sm:hidden"
+  aria-hidden="true"
+>
+</div>
+
 <script>
   function toggleNav() {
     const menuBtn = document.querySelector("#menu-btn");
     const menuItems = document.querySelector("#menu-items");
     const menuIcon = document.querySelector("#menu-icon");
     const closeIcon = document.querySelector("#close-icon");
+    const menuOverlay = document.querySelector("#menu-overlay");
 
-    if (!menuBtn || !menuItems || !menuIcon || !closeIcon) return;
+    if (!menuBtn || !menuItems || !menuIcon || !closeIcon || !menuOverlay)
+      return;
 
-    menuBtn.addEventListener("click", () => {
-      const openMenu = menuBtn.getAttribute("aria-expanded") === "true";
+    const openMenu = () => {
+      menuBtn.setAttribute("aria-expanded", "true");
+      menuBtn.setAttribute("aria-label", "Close Menu");
+      menuItems.classList.remove("opacity-0", "pointer-events-none");
+      menuItems.classList.add("opacity-100", "pointer-events-auto");
+      menuOverlay.classList.remove("opacity-0", "pointer-events-none");
+      menuOverlay.classList.add("opacity-100", "pointer-events-auto");
+      menuIcon.classList.add("hidden");
+      closeIcon.classList.remove("hidden");
+    };
 
-      menuBtn.setAttribute("aria-expanded", openMenu ? "false" : "true");
-      menuBtn.setAttribute("aria-label", openMenu ? "Open Menu" : "Close Menu");
+    const closeMenu = () => {
+      menuBtn.setAttribute("aria-expanded", "false");
+      menuBtn.setAttribute("aria-label", "Open Menu");
+      menuItems.classList.add("opacity-0", "pointer-events-none");
+      menuItems.classList.remove("opacity-100", "pointer-events-auto");
+      menuOverlay.classList.add("opacity-0", "pointer-events-none");
+      menuOverlay.classList.remove("opacity-100", "pointer-events-auto");
+      menuIcon.classList.remove("hidden");
+      closeIcon.classList.add("hidden");
+    };
 
-      menuItems.classList.toggle("hidden");
-      menuIcon.classList.toggle("hidden");
-      closeIcon.classList.toggle("hidden");
+    menuBtn.addEventListener("click", () => {
+      const isOpen = menuBtn.getAttribute("aria-expanded") === "true";
+      if (isOpen) {
+        closeMenu();
+      } else {
+        openMenu();
+      }
     });
+
+    // Close menu when clicking overlay
+    menuOverlay.addEventListener("click", closeMenu);
+
+    // Close menu when clicking theme toggle (doesn't navigate, so close manually)
+    const themeBtn = document.querySelector("#theme-btn");
+    themeBtn?.addEventListener("click", closeMenu);
   }
 
   toggleNav();