chore(header): add mobile menu functionality

Implemented a toggle function for the mobile menu, allowing it to open and close with button clicks. Added event listeners to close the menu when clicking outside of it or pressing the Escape key. Updated header layout to include a mobile menu button and icons for open/closed states.

themes/aurelia-theme/assets/js/main.js

@@ -1 +1,42 @@
 console.log('This site was generated by Hugo.');
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Mobile menu functionality
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    if (mobileMenuButton) {
+        mobileMenuButton.addEventListener('click', toggleMobileMenu);
+    }
+
+    function toggleMobileMenu() {
+        const menu = document.getElementById('mobile-menu');
+        const button = document.getElementById('mobile-menu-button');
+        const closedIcon = document.getElementById('menu-closed-icon');
+        const openIcon = document.getElementById('menu-open-icon');
+
+        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+        button.setAttribute('aria-expanded', !isExpanded);
+        menu.classList.toggle('hidden');
+        closedIcon.classList.toggle('hidden');
+        openIcon.classList.toggle('block');
+        openIcon.classList.toggle('hidden');
+        closedIcon.classList.toggle('block');
+    }
+
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (event) => {
+        const menu = document.getElementById('mobile-menu');
+        const button = document.getElementById('mobile-menu-button');
+
+        if (!menu.contains(event.target) && !button.contains(event.target) && !menu.classList.contains('hidden')) {
+            toggleMobileMenu();
+        }
+    });
+
+    // Close mobile menu when pressing Escape key
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape' && !document.getElementById('mobile-menu').classList.contains('hidden')) {
+            toggleMobileMenu();
+        }
+    });
+});

themes/aurelia-theme/layouts/partials/head.html

@@ -6,7 +6,7 @@
 <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
 
 <meta name="msapplication-tap-highlight" content="no" />
-<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
 
 <meta name="description" content="Aurelia is a JavaScript client framework for web, mobile and desktop that leverages simple conventions to empower your creativity."/>
 <meta name="robots" content="index,follow"/>

themes/aurelia-theme/layouts/partials/header.html

@@ -5,6 +5,7 @@
                 <img src="{{ "logo.svg" | relURL }}" class="logo" width="124" height="36" alt="Aurelia">
             </a>
 
+            <!-- Desktop Menu -->
             <div class="hidden md:flex space-x-8">
                 {{ range .Site.Data.header.menu }}
                     {{ $link := .link }}
@@ -20,14 +21,51 @@
                 {{ end }}
             </div>
 
-            <button onclick="openSearch()" 
-                    class="p-2 rounded-full hover:bg-gray-100 text-gray-500 hover:text-aurelia transition-all" 
-                    aria-label="Search">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="11" cy="11" r="8"></circle>
-                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-                </svg>
-            </button>
+            <div class="flex items-center space-x-4">
+                <button onclick="openSearch()" 
+                        class="p-2 rounded-full hover:bg-gray-100 text-gray-500 hover:text-aurelia transition-all" 
+                        aria-label="Search">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                </button>
+
+                <!-- Mobile Menu Button -->
+                <button type="button"
+                        class="md:hidden p-2 rounded-full hover:bg-gray-100 text-gray-500 hover:text-aurelia transition-all"
+                        aria-controls="mobile-menu"
+                        aria-expanded="false"
+                        id="mobile-menu-button">
+                    <span class="sr-only">Open main menu</span>
+                    <!-- Icon when menu is closed -->
+                    <svg class="block h-6 w-6" id="menu-closed-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                    <!-- Icon when menu is open -->
+                    <svg class="hidden h-6 w-6" id="menu-open-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <!-- Mobile Menu -->
+        <div class="hidden md:hidden" id="mobile-menu">
+            <div class="px-2 pt-2 pb-3 space-y-1">
+                {{ range .Site.Data.header.menu }}
+                    {{ $link := .link }}
+                    {{ if not (hasPrefix .link "http") }}
+                        {{ $link = printf "%s%s" $.Site.Params.pathPrefix .link }}
+                    {{ end }}
+
+                    <a href="{{ $link }}" 
+                       {{ if .target }}target="{{ .target }}"{{ end }}
+                       class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-aurelia hover:bg-gray-50 transition-colors">
+                        {{ .name }}
+                    </a>
+                {{ end }}
+            </div>
         </div>
     </div>
 </nav>