Merge pull request #3 from rocketdeploy-dev/work/update-header-for-mobile-navigation

feat(nav): add mobile nav toggle

Author: Don-Damiano

src/components/Header.astro

@@ -16,15 +16,40 @@ const nav = lang === "pl"
     ];
 ---
 <nav class="nav">
-  <div class="brand">
-    <b>rocketdeploy</b>
-    <small>systems · delivery · ops</small>
+  <div class="nav-header">
+    <div class="brand">
+      <b>rocketdeploy</b>
+      <small>systems · delivery · ops</small>
+    </div>
+    <button
+      class="nav-toggle"
+      type="button"
+      aria-controls="primary-nav"
+      aria-expanded="false"
+    >
+      Menu
+    </button>
   </div>
 
-  <div class="navlinks">
+  <div class="navlinks" id="primary-nav" data-open="false">
     {nav.map((i) => (
       <a href={i.href}>{i.label}</a>
     ))}
     <LanguageSwitch lang={lang} />
   </div>
 </nav>
+
+<script is:inline>
+  const navToggle = document.querySelector(".nav-toggle");
+  const navLinks = document.querySelector("#primary-nav");
+
+  if (navToggle && navLinks) {
+    navToggle.addEventListener("click", () => {
+      const isOpen = navToggle.getAttribute("aria-expanded") === "true";
+      const nextState = String(!isOpen);
+
+      navToggle.setAttribute("aria-expanded", nextState);
+      navLinks.dataset.open = nextState;
+    });
+  }
+</script>

src/styles/global.css

@@ -56,6 +56,13 @@ a:hover{ border-bottom-color: rgba(122,162,255,.85); }
   padding: 14px 0;
 }
 
+.nav-header{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap: 16px;
+}
+
 .brand{
   display:flex;
   gap: 10px;
@@ -76,6 +83,25 @@ a:hover{ border-bottom-color: rgba(122,162,255,.85); }
   font-size: 14px;
 }
 
+.nav-toggle{
+  display:none;
+  align-items:center;
+  justify-content:center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--text);
+  font-size: 13px;
+}
+
+.navlinks a:focus-visible,
+.nav-toggle:focus-visible{
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
 .lang{
   display:flex;
   gap: 8px;
@@ -94,6 +120,33 @@ a:hover{ border-bottom-color: rgba(122,162,255,.85); }
   color: var(--text);
 }
 
+@media (max-width: 768px){
+  .nav{
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .nav-header{
+    width: 100%;
+  }
+
+  .nav-toggle{
+    display:inline-flex;
+  }
+
+  .navlinks{
+    display:none;
+    flex-direction: column;
+    align-items:flex-start;
+    gap: 12px;
+  }
+
+  .navlinks[data-open="true"]{
+    display:flex;
+  }
+}
+
 main{ padding: 58px 0 70px; }
 
 .hero{