Add responsive hamburger menu for mobile navigation

Author: metaColin

src/_includes/layouts/base.njk

@@ -16,6 +16,9 @@
                     <img src="/img/oarc-cloud-icon.png" alt="Open AR Cloud" class="logo-icon">
                     <strong>OpenARCloud</strong>
                 </a>
+                <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
+                    <span class="hamburger"></span>
+                </button>
                 <nav class="main-nav">
                     <a href="/">Home</a>
                     <a href="/platform/">Platform</a>
@@ -70,5 +73,15 @@
             </div>
         </div>
     </footer>
+    <script>
+        const navToggle = document.querySelector('.nav-toggle');
+        const mainNav = document.querySelector('.main-nav');
+
+        navToggle.addEventListener('click', () => {
+            const isOpen = mainNav.classList.toggle('is-open');
+            navToggle.classList.toggle('is-open');
+            navToggle.setAttribute('aria-expanded', isOpen);
+        });
+    </script>
 </body>
 </html>

src/css/style.css

@@ -113,20 +113,6 @@ body::before {
     transition: all var(--transition-base);
 }
 
-.logo::before {
-    content: '[';
-    color: var(--accent-cyan);
-    margin-right: 4px;
-    opacity: 0.6;
-}
-
-.logo::after {
-    content: ']';
-    color: var(--accent-cyan);
-    margin-left: 4px;
-    opacity: 0.6;
-}
-
 .logo:hover {
     color: var(--primary-violet);
     transform: translateX(2px);
@@ -176,6 +162,57 @@ body::before {
     width: 30px;
 }
 
+/* Hamburger Toggle Button */
+.nav-toggle {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+    z-index: 1001;
+}
+
+.hamburger {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background: var(--neutral-800);
+    position: relative;
+    transition: background var(--transition-fast);
+}
+
+.hamburger::before,
+.hamburger::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 24px;
+    height: 2px;
+    background: var(--neutral-800);
+    transition: transform var(--transition-fast);
+}
+
+.hamburger::before {
+    top: -7px;
+}
+
+.hamburger::after {
+    top: 7px;
+}
+
+/* Hamburger animation when open */
+.nav-toggle.is-open .hamburger {
+    background: transparent;
+}
+
+.nav-toggle.is-open .hamburger::before {
+    transform: rotate(45deg) translate(5px, 5px);
+}
+
+.nav-toggle.is-open .hamburger::after {
+    transform: rotate(-45deg) translate(5px, -5px);
+}
+
 /* Main Content */
 .main-content {
     min-height: calc(100vh - 300px);
@@ -624,13 +661,41 @@ ol {
     }
 
     .header-content {
-        flex-direction: column;
-        gap: 20px;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .nav-toggle {
+        display: block;
     }
 
     .main-nav {
-        flex-wrap: wrap;
-        justify-content: center;
+        display: none;
+        flex-direction: column;
+        width: 100%;
+        background: white;
+        padding: 20px 0;
+        gap: 0;
+        border-top: 1px solid var(--neutral-200);
+        margin-top: 20px;
+    }
+
+    .main-nav.is-open {
+        display: flex;
+    }
+
+    .main-nav a {
+        padding: 12px 0;
+        border-radius: 0;
+        border-bottom: 1px solid var(--neutral-100);
+    }
+
+    .main-nav a:last-child {
+        border-bottom: none;
+    }
+
+    .main-nav a::before {
+        display: none;
     }
 
     .cta-grid {