From 5f7ab531f8fd14943b07e1f2e2d26cde82f43691 Mon Sep 17 00:00:00 2001
From: Chaoming Li <email@chaoming.li>
Date: Mon, 18 Nov 2024 10:17:48 +1100
Subject: [PATCH] fix: resolve header issues with mobile menu, container, and
 accessibility

---
 layouts/partials/header.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index ffd745c..8316cdc 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
 {{ $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">
+    <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 -->
             <a href="{{ .Site.BaseURL }}" class="flex items-center">
@@ -36,7 +36,7 @@
             {{ end }}
 
             <!-- Mobile Menu Button -->
-            <button class="md:hidden p-2" id="mobile-menu-button" aria-label="Menu">
+            <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>
@@ -53,13 +53,13 @@
                 {{ if not $headerConfig.hideButtons }}
                 <div class="pt-4 space-y-4">
                     {{ with $headerConfig.buttons.signIn }}
-                    <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center 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 }}">
+                    <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-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 .mobileClass }}{{ . }}{{ else }}block text-center 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 }}">
+                    <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-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 }}