feat: mobile hamburger nav menu

Author: Patel230

docs/feed.xml

@@ -5,7 +5,7 @@
     <link>https://graycodeai.github.io/iterate</link>
     <description>A coding agent that improves itself. Every session, documented.</description>
     <language>en</language>
-    <lastBuildDate>Wed, 25 Mar 2026 21:39:15 GMT</lastBuildDate>
+    <lastBuildDate>Wed, 25 Mar 2026 21:40:15 GMT</lastBuildDate>
 
     <item>
       <title>Day 0 — Born</title>
@@ -16,7 +16,7 @@
 I grow in public. I learn from community issues. I journal every session, no hiding failures. Transparency over perfection.
 
 Let&#x27;s see what happens.</description>
-      <pubDate>Thu, 26 Mar 2026 03:09:15 GMT</pubDate>
+      <pubDate>Thu, 26 Mar 2026 03:10:15 GMT</pubDate>
     </item>
   </channel>
 </rss>

docs/index.html

@@ -26,14 +26,17 @@
       <div class="nav-icon">it</div>
       <span class="nav-title">iterate</span>
     </a>
-    <div class="nav-links">
+    <div class="nav-links" id="nav-links">
       <a href="#journal">Journal</a>
       <a href="#how">How it works</a>
       <a href="#features">Features</a>
       <a href="#identity">Identity</a>
       <a href="#quickstart">Quickstart</a>
       <a href="https://github.com/GrayCodeAI/iterate" target="_blank" rel="noopener" class="nav-gh">GitHub ↗</a>
     </div>
+    <button class="nav-hamburger" id="nav-hamburger" aria-label="Toggle menu" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
   </div>
 </nav>
 
@@ -267,5 +270,21 @@ <h2 class="cta-title">Watch it grow in real time</h2>
   </div>
 </footer>
 
+<script>
+  const hamburger = document.getElementById('nav-hamburger');
+  const navLinks  = document.getElementById('nav-links');
+  hamburger.addEventListener('click', () => {
+    const open = navLinks.classList.toggle('open');
+    hamburger.setAttribute('aria-expanded', open);
+    hamburger.classList.toggle('open', open);
+  });
+  navLinks.querySelectorAll('a').forEach(a => {
+    a.addEventListener('click', () => {
+      navLinks.classList.remove('open');
+      hamburger.classList.remove('open');
+      hamburger.setAttribute('aria-expanded', false);
+    });
+  });
+</script>
 </body>
 </html>

docs/style.css

@@ -93,6 +93,7 @@ nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  position: relative;
 }
 
 .nav-brand {
@@ -958,6 +959,32 @@ footer {
   font-size: 0.8rem;
 }
 
+/* ── hamburger ── */
+
+.nav-hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 36px; height: 36px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+}
+.nav-hamburger span {
+  display: block;
+  height: 2px;
+  background: var(--slate-400);
+  border-radius: 2px;
+  transition: all 0.2s;
+}
+.nav-hamburger:hover span { background: var(--bright); }
+.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.nav-hamburger.open span:nth-child(2) { opacity: 0; }
+.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
 /* ── responsive ── */
 
 @media (max-width: 860px) {
@@ -981,6 +1008,19 @@ footer {
   .bento-cell.wide { grid-column: 1; }
   .entry { grid-template-columns: 52px 1fr; gap: 1.25rem; padding: 1.25rem; }
   .entry-day-num { font-size: 1.5rem; }
-  .nav-links a:not(.nav-gh) { display: none; }
+  .nav-hamburger { display: flex; }
+  .nav-links {
+    display: none;
+    position: absolute;
+    top: 58px; left: 0; right: 0;
+    background: rgba(2,6,23,0.97);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border);
+    flex-direction: column;
+    padding: 0.75rem 1.25rem 1rem;
+    gap: 0.25rem;
+  }
+  .nav-links.open { display: flex; }
+  .nav-links a { padding: 0.65rem 0.5rem; font-size: 0.9rem; }
   .footer-inner { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
 }

scripts/build/build_site.py

@@ -328,14 +328,17 @@ def main():
       <div class="nav-icon">it</div>
       <span class="nav-title">iterate</span>
     </a>
-    <div class="nav-links">
+    <div class="nav-links" id="nav-links">
       {journal_nav_link}
       <a href="#how">How it works</a>
       <a href="#features">Features</a>
       <a href="#identity">Identity</a>
       <a href="#quickstart">Quickstart</a>
       <a href="https://github.com/{gh}" target="_blank" rel="noopener" class="nav-gh">GitHub ↗</a>
     </div>
+    <button class="nav-hamburger" id="nav-hamburger" aria-label="Toggle menu" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
   </div>
 </nav>
 
@@ -485,6 +488,22 @@ def main():
   </div>
 </footer>
 
+<script>
+  const hamburger = document.getElementById('nav-hamburger');
+  const navLinks  = document.getElementById('nav-links');
+  hamburger.addEventListener('click', () => {{
+    const open = navLinks.classList.toggle('open');
+    hamburger.setAttribute('aria-expanded', open);
+    hamburger.classList.toggle('open', open);
+  }});
+  navLinks.querySelectorAll('a').forEach(a => {{
+    a.addEventListener('click', () => {{
+      navLinks.classList.remove('open');
+      hamburger.classList.remove('open');
+      hamburger.setAttribute('aria-expanded', false);
+    }});
+  }});
+</script>
 </body>
 </html>
 """