From 956ab747b51fa57446b7a37fb207d9de47633a4d Mon Sep 17 00:00:00 2001
From: Chaoming Li <email@chaoming.li>
Date: Tue, 19 Nov 2024 17:23:08 +1100
Subject: [PATCH] fix: improve mobile menu functionality and make it full width

---
 layouts/partials/header.html | 118 ++++++++++++++++++++---------------
 1 file changed, 69 insertions(+), 49 deletions(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 7d07e7b..b730f18 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,56 +1,61 @@
 {{ $headerConfig := .Site.Params.header }}
-<header class="fixed w-full top-0 z-50 {{ with $headerConfig.background }}{{ . }}{{ else }}bg-white/80 backdrop-blur-sm{{ end }} {{ with $headerConfig.border }}{{ . }}{{ else }}border-b border-gray-100{{ end }}">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
-        <nav class="flex items-center justify-between h-20">
-            <!-- Logo and Title -->
-            <a href="{{ .Site.BaseURL }}" class="flex items-center space-x-4">
-                {{ with $headerConfig.logo }}
-                    <img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-20{{ end }}">
-                {{ else }}
-                    <span class="text-2xl font-bold text-gray-900">{{ .Site.Title }}</span>
-                {{ end }}
-                {{ if .Site.Title }}
-                    <span class="text-2xl font-semibold text-gray-800">{{ .Site.Title }}</span>
-                {{ end }}
-            </a>
-
-            <!-- Navigation -->
-            <div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
-                {{ range .Site.Menus.main }}
-                    <a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-gray-600 hover:text-primary-600 font-medium transition duration-200{{ end }}">{{ .Name }}</a>
-                {{ end }}
-            </div>
-
-            <!-- CTA Buttons -->
-            {{ if not $headerConfig.hideButtons }}
-            <div class="hidden md:flex items-center space-x-4">
-                {{ with $headerConfig.buttons.signIn }}
-                <a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
-                    {{ .text | default "Sign in" }}
+<div class="mobile-menu-wrapper">
+    <input type="checkbox" id="nav-toggle" class="nav-toggle">
+    <header class="fixed w-full top-0 z-50 {{ with $headerConfig.background }}{{ . }}{{ else }}bg-white/80 backdrop-blur-sm{{ end }} {{ with $headerConfig.border }}{{ . }}{{ else }}border-b border-gray-100{{ end }}">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
+            <nav class="flex items-center justify-between h-20">
+                <!-- Logo and Title -->
+                <a href="{{ .Site.BaseURL }}" class="flex items-center space-x-4">
+                    {{ with $headerConfig.logo }}
+                        <img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-20{{ end }}">
+                    {{ else }}
+                        <span class="text-2xl font-bold text-gray-900">{{ .Site.Title }}</span>
+                    {{ end }}
+                    {{ if .Site.Title }}
+                        <span class="text-2xl font-semibold text-gray-800">{{ .Site.Title }}</span>
+                    {{ end }}
                 </a>
-                {{ end }}
-                
-                {{ with $headerConfig.buttons.getStarted }}
-                <a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
-                    {{ .text | default "Get Started" }}
-                </a>
-                {{ end }}
-            </div>
-            {{ end }}
 
-            <!-- Mobile Menu Button -->
-            <button class="md:hidden p-2 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 transition-colors" id="mobile-menu-button" aria-label="Menu" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-                </svg>
-            </button>
-        </nav>
+                <!-- Navigation -->
+                <div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
+                    {{ range .Site.Menus.main }}
+                        <a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-gray-600 hover:text-primary-600 font-bold transition duration-200{{ end }}">{{ .Name }}</a>
+                    {{ end }}
+                </div>
+
+                <!-- CTA Buttons -->
+                {{ if not $headerConfig.hideButtons }}
+                <div class="hidden md:flex items-center space-x-4">
+                    {{ with $headerConfig.buttons.signIn }}
+                    <a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
+                        {{ .text | default "Sign in" }}
+                    </a>
+                    {{ end }}
+                    
+                    {{ with $headerConfig.buttons.getStarted }}
+                    <a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
+                        {{ .text | default "Get Started" }}
+                    </a>
+                    {{ end }}
+                </div>
+                {{ end }}
+
+                <!-- Mobile Menu Toggle -->
+                <div class="md:hidden">
+                    <label for="nav-toggle" class="p-2 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 transition-colors cursor-pointer">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </label>
+                </div>
+            </nav>
+        </div>
 
         <!-- Mobile Menu -->
-        <div class="md:hidden hidden" id="mobile-menu">
-            <div class="py-4 space-y-4">
+        <div class="nav-content md:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg">
+            <div class="w-full px-6 py-4">
                 {{ range .Site.Menus.main }}
-                    <a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-gray-600 hover:text-primary-600 font-medium transition duration-200 py-2{{ end }}">{{ .Name }}</a>
+                    <a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-gray-600 hover:text-primary-600 font-bold transition duration-200 py-2{{ end }}">{{ .Name }}</a>
                 {{ end }}
                 
                 {{ if not $headerConfig.hideButtons }}
@@ -70,5 +75,20 @@
                 {{ end }}
             </div>
         </div>
-    </div>
-</header>
+    </header>
+
+    <style>
+        .mobile-menu-wrapper {
+            position: relative;
+        }
+        .nav-toggle {
+            display: none;
+        }
+        .nav-content {
+            display: none;
+        }
+        .nav-toggle:checked ~ header .nav-content {
+            display: block;
+        }
+    </style>
+</div>