Merge pull request #3 from data-privacy-stack/feat/mobile-nav

Author: omri374

astro.config.mjs

@@ -20,6 +20,12 @@ export default defineConfig({
       },
       customCss: ["./src/styles/tokens.css"],
       head: [
+        {
+          // Default to dark regardless of OS; only an explicit toggle overrides it.
+          tag: "script",
+          content:
+            'try{var t=localStorage.getItem("starlight-theme");if(t!=="light"&&t!=="dark"){t="dark";localStorage.setItem("starlight-theme",t)}document.documentElement.dataset.theme=t}catch(e){}',
+        },
         { tag: "link", attrs: { rel: "preconnect", href: "https://fonts.googleapis.com" } },
         { tag: "link", attrs: { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: true } },
         {

src/pages/index.astro

@@ -46,15 +46,14 @@ const posts = (await getCollection("docs"))
     <script is:inline>
       // Set theme before paint to avoid a flash. Shares Starlight's key so the
       // choice carries over to the docs/blog pages.
+      // Default is DARK regardless of OS; only an explicit toggle overrides it.
       (function () {
         try {
-          const stored = localStorage.getItem("starlight-theme");
-          const theme =
-            stored === "light" || stored === "dark"
-              ? stored
-              : window.matchMedia("(prefers-color-scheme: dark)").matches
-                ? "dark"
-                : "light";
+          let theme = localStorage.getItem("starlight-theme");
+          if (theme !== "light" && theme !== "dark") {
+            theme = "dark";
+            localStorage.setItem("starlight-theme", theme);
+          }
           document.documentElement.dataset.theme = theme;
         } catch (e) {}
       })();
@@ -66,7 +65,7 @@ const posts = (await getCollection("docs"))
         <Image class="brand-mark" src={mark} alt="" width={28} height={28} aria-hidden="true" />
         Data Privacy Stack
       </a>
-      <nav class="links">
+      <nav id="nav-links" class="links">
         <a href="#about">About</a>
         <a href="#projects">Projects</a>
         <a href="#governance">Governance</a>
@@ -79,6 +78,10 @@ const posts = (await getCollection("docs"))
         <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
         <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
       </button>
+      <button id="menu-toggle" class="menu-toggle" type="button" aria-label="Toggle menu" aria-expanded="false" aria-controls="nav-links">
+        <svg class="icon-menu" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+        <svg class="icon-close" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>
+      </button>
     </header>
 
     <main id="top">
@@ -244,6 +247,25 @@ const posts = (await getCollection("docs"))
         document.documentElement.dataset.theme = next;
         try { localStorage.setItem("starlight-theme", next); } catch (e) {}
       });
+
+      // Mobile hamburger menu
+      const nav = document.querySelector(".nav");
+      const mbtn = document.getElementById("menu-toggle");
+      const setMenu = (open) => {
+        nav.classList.toggle("open", open);
+        mbtn?.setAttribute("aria-expanded", open ? "true" : "false");
+      };
+      mbtn?.addEventListener("click", () =>
+        setMenu(!nav.classList.contains("open"))
+      );
+      // Close after choosing a destination
+      document
+        .querySelectorAll("#nav-links a")
+        .forEach((a) => a.addEventListener("click", () => setMenu(false)));
+      // Close on Escape
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") setMenu(false);
+      });
     </script>
 
     <style>
@@ -339,6 +361,46 @@ const posts = (await getCollection("docs"))
       :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
       :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
 
+      /* Mobile hamburger (hidden on desktop) */
+      .menu-toggle {
+        display: none;
+        place-items: center;
+        width: 36px; height: 36px;
+        border-radius: 999px;
+        border: 1px solid var(--card-border);
+        background: var(--card-bg);
+        color: var(--text);
+        cursor: pointer;
+      }
+      .menu-toggle .icon-close { display: none; }
+      .nav.open .menu-toggle .icon-menu { display: none; }
+      .nav.open .menu-toggle .icon-close { display: block; }
+
+      @media (max-width: 880px) {
+        .nav { flex-wrap: nowrap; }
+        .menu-toggle { display: inline-grid; }
+        .links {
+          display: none;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          flex-direction: column;
+          align-items: stretch;
+          gap: 0;
+          padding: 0.4rem 0;
+          background: var(--nav-bg);
+          backdrop-filter: saturate(180%) blur(10px);
+          border-bottom: 1px solid var(--nav-border);
+        }
+        .nav.open .links { display: flex; }
+        .links a {
+          padding: 0.75rem clamp(1rem, 5vw, 3rem);
+          font-size: 1rem;
+        }
+        .links a:hover { background: rgba(127, 127, 127, 0.1); color: var(--accent-strong); }
+      }
+
       main { width: min(1040px, 92vw); margin: 0 auto; }
 
       /* Hero */