Fix responsive header navigation with mobile hamburger menu

Author: PredictabilityAtScale

website/index.html

@@ -57,15 +57,29 @@
     <header class="site-header">
       <div class="container nav">
         <a class="brand" href="#top" aria-label="PromptOpsKit home">PromptOpsKit</a>
-        <nav aria-label="Primary">
+
+        <button
+          class="menu-toggle"
+          type="button"
+          aria-expanded="false"
+          aria-controls="primary-nav"
+          aria-label="Toggle navigation menu"
+        >
+          <span aria-hidden="true">☰</span>
+          <span>Menu</span>
+        </button>
+
+        <nav id="primary-nav" aria-label="Primary">
           <a href="#why">Why</a>
           <a href="#what">What</a>
           <a href="#quickstart">How</a>
           <a href="#features">Features</a>
           <a href="#faq">FAQ</a>
           <a href="/docs/index.html">Docs</a>
+          <a class="button button-primary mobile-github" href="https://github.com/PredictabilityAtScale/promptopskit">GitHub</a>
         </nav>
-        <a class="button button-primary" href="https://github.com/PredictabilityAtScale/promptopskit">GitHub</a>
+
+        <a class="button button-primary desktop-github" href="https://github.com/PredictabilityAtScale/promptopskit">GitHub</a>
       </div>
     </header>
 
@@ -349,5 +363,38 @@ <h2>Repo-native, not dashboard-native</h2>
         <p><a href="https://github.com/PredictabilityAtScale/promptopskit">GitHub</a></p>
       </div>
     </footer>
+    <script>
+      (() => {
+        const header = document.querySelector('.site-header');
+        const toggle = document.querySelector('.menu-toggle');
+        const nav = document.getElementById('primary-nav');
+
+        if (!header || !toggle || !nav) return;
+
+        const closeMenu = () => {
+          header.classList.remove('is-menu-open');
+          toggle.setAttribute('aria-expanded', 'false');
+        };
+
+        toggle.addEventListener('click', () => {
+          const isOpen = header.classList.toggle('is-menu-open');
+          toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+        });
+
+        nav.querySelectorAll('a').forEach((link) => {
+          link.addEventListener('click', () => {
+            if (window.matchMedia('(max-width: 900px)').matches) {
+              closeMenu();
+            }
+          });
+        });
+
+        window.addEventListener('resize', () => {
+          if (!window.matchMedia('(max-width: 900px)').matches) {
+            closeMenu();
+          }
+        });
+      })();
+    </script>
   </body>
 </html>

website/styles.css

@@ -35,6 +35,7 @@ body {
 }
 
 .nav {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -48,6 +49,28 @@ body {
   text-decoration: none;
 }
 
+.menu-toggle {
+  display: none;
+  align-items: center;
+  gap: 0.45rem;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--text);
+  font-weight: 600;
+  padding: 0.5rem 0.7rem;
+  cursor: pointer;
+}
+
+.menu-toggle span[aria-hidden='true'] {
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.mobile-github {
+  display: none;
+}
+
 nav {
   display: flex;
   gap: 1.25rem;
@@ -232,8 +255,39 @@ ul {
 }
 
 @media (max-width: 900px) {
+  .menu-toggle {
+    display: inline-flex;
+    margin-left: auto;
+  }
+
+  .desktop-github {
+    display: none;
+  }
+
   nav {
     display: none;
+    position: absolute;
+    top: calc(100% - 6px);
+    right: 0;
+    left: 0;
+    z-index: 12;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: #fff;
+    padding: 0.75rem;
+    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .site-header.is-menu-open nav {
+    display: flex;
+  }
+
+  .mobile-github {
+    display: inline-block;
+    margin-top: 0.25rem;
   }
 
   .grid.two,