improve mobile navbar rendering

Author: tstromberg

src/_layouts/base.njk

@@ -27,17 +27,70 @@
     <div class="nav-logo">
       <a href="/"><span class="logo-prefix">≡</span>codeGROOVE</a>
     </div>
+    <button class="nav-hamburger" aria-label="Toggle menu" aria-expanded="false">
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+      <span class="hamburger-line"></span>
+    </button>
     <ul class="nav-links">
       <li><a href="/about/">about</a></li>
-      <li><a href="/products/ready-to-review/">products</a></li>
+      <li><a href="/products/ready-to-review/">Ready to Review</a></li>
       <li><a href="/support/">support</a></li>
       <li><a href="/security/">security</a></li>
       <li><a href="/opensource/">opensource</a></li>
     </ul>
   </nav>
+  <div class="nav-overlay"></div>
 
   <main id="main-content">
     {{ content | safe }}
   </main>
+
+  <script>
+    (function() {
+      const hamburger = document.querySelector('.nav-hamburger');
+      const navLinks = document.querySelector('.nav-links');
+      const overlay = document.querySelector('.nav-overlay');
+      const body = document.body;
+
+      function toggleMenu() {
+        const isOpen = navLinks.classList.contains('nav-links--open');
+
+        if (isOpen) {
+          navLinks.classList.remove('nav-links--open');
+          overlay.classList.remove('nav-overlay--visible');
+          body.classList.remove('nav-open');
+          hamburger.classList.remove('nav-hamburger--active');
+          hamburger.setAttribute('aria-expanded', 'false');
+        } else {
+          navLinks.classList.add('nav-links--open');
+          overlay.classList.add('nav-overlay--visible');
+          body.classList.add('nav-open');
+          hamburger.classList.add('nav-hamburger--active');
+          hamburger.setAttribute('aria-expanded', 'true');
+        }
+      }
+
+      hamburger.addEventListener('click', toggleMenu);
+      overlay.addEventListener('click', toggleMenu);
+
+      // Close menu when clicking a link
+      const links = navLinks.querySelectorAll('a');
+      links.forEach(link => {
+        link.addEventListener('click', () => {
+          if (navLinks.classList.contains('nav-links--open')) {
+            toggleMenu();
+          }
+        });
+      });
+
+      // Close menu on escape key
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && navLinks.classList.contains('nav-links--open')) {
+          toggleMenu();
+        }
+      });
+    })();
+  </script>
 </body>
 </html>

src/assets/css/style.css

@@ -151,6 +151,72 @@ body {
     color: var(--cyan);
 }
 
+/* Hamburger Menu */
+.nav-hamburger {
+    display: none;
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    z-index: 103;
+    transition: transform 0.3s ease;
+}
+
+.hamburger-line {
+    width: 24px;
+    height: 2.5px;
+    background: var(--black);
+    border-radius: 1px;
+    transition: all 0.3s ease;
+    transform-origin: center;
+}
+
+.nav-hamburger--active .hamburger-line:nth-child(1) {
+    transform: translateY(7.5px) rotate(45deg);
+}
+
+.nav-hamburger--active .hamburger-line:nth-child(2) {
+    opacity: 0;
+}
+
+.nav-hamburger--active .hamburger-line:nth-child(3) {
+    transform: translateY(-7.5px) rotate(-45deg);
+}
+
+/* Mobile Menu Overlay */
+.nav-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 98;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.nav-overlay--visible {
+    opacity: 1;
+    pointer-events: all;
+}
+
+/* Prevent body scroll when menu is open */
+body.nav-open {
+    overflow: hidden;
+}
+
 
 /* Accessibility: Focus Indicators */
 a:focus-visible,
@@ -1359,28 +1425,62 @@ button,
         height: 34px;
     }
 
+    /* Show hamburger menu on mobile */
+    .nav-hamburger {
+        display: flex;
+    }
+
+    /* Show overlay on mobile */
+    .nav-overlay {
+        display: block;
+    }
+
+    /* Mobile menu - slide in from right */
     .nav-links {
-        position: relative;
-        right: auto;
-        gap: 4px;
-        font-size: 12px;
-        margin-left: auto;
-        margin-right: 8px;
-        height: 34px;
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 280px;
+        height: 100vh;
+        background: var(--yellow);
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
+        padding: 80px 0 40px;
+        gap: 0;
+        margin: 0;
+        z-index: 99;
+        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
+        transition: right 0.3s ease;
+        overflow-y: auto;
+    }
+
+    .nav-links--open {
+        right: 0;
+    }
+
+    .nav-links li {
+        width: 100%;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     }
 
     .nav-links li:not(:last-child)::after {
-        margin-left: 4px;
-        font-size: 12px;
+        display: none;
     }
 
     .nav-links a {
-        padding: 8px 12px;
-        min-height: 34px;
-        min-width: 44px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        width: 100%;
+        padding: 18px 24px;
+        font-size: 16px;
+        font-weight: 700;
+        text-align: left;
+        min-height: 60px;
+        transition: background 0.2s, padding-left 0.2s;
+    }
+
+    .nav-links a:hover {
+        background: rgba(0, 0, 0, 0.05);
+        padding-left: 32px;
     }
 
     .hero {
@@ -1621,21 +1721,16 @@ button,
 /* Extra small screens (iPhone SE, etc) */
 @media (max-width: 374px) {
     .nav-logo a {
-        font-size: 16px;
+        font-size: 14px;
     }
 
     .nav-accent-angle {
-        width: 8em;
+        width: 7.5em;
     }
 
+    /* Mobile menu width adjustment for very small screens */
     .nav-links {
-        gap: 2px;
-        font-size: 11px;
-        margin-right: 4px;
-    }
-
-    .nav-links a {
-        padding: 8px 10px;
+        width: 260px;
     }
 
     .hero-content {