From 82f361462d5fe0a5bd7feeb882818ffbc8b420c7 Mon Sep 17 00:00:00 2001
From: Your Name <user@example.com>
Date: Fri, 31 Jul 2026 14:25:11 -0400
Subject: [PATCH] Add mobile hamburger menu with all navigation links

- Mobile nav was missing entirely (hidden md:flex with no fallback)
- Added hamburger toggle button with animated X icon
- Mobile menu includes: Case Studies, Roofing Contractors, Timber &
  Carpentry, Coverage Area, plus Browse Contractors CTA
- Menu auto-closes on link tap or Escape key
- Accessible: aria-expanded toggles, aria-label on button
---
 _includes/header.html | 96 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 86 insertions(+), 10 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 2da6320..c978623 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -16,7 +16,7 @@
         </div>
       </a>
 
-      <!-- Navigation Links -->
+      <!-- Desktop Navigation Links -->
       <nav class="hidden md:flex items-center gap-8">
         <a href="{{ '/' | relative_url }}" class="text-slate-200 hover:text-amber-400 font-medium text-sm transition-colors">
           Case Studies
@@ -25,23 +25,99 @@
           Roofing Contractors
         </a>
         <a href="{{ '/timber-and-carpentry/' | relative_url }}" class="text-slate-300 hover:text-amber-400 font-medium text-sm transition-colors">
-          Timber & Carpentry
+          Timber &amp; Carpentry
         </a>
         <a href="{{ '/coverage-area/' | relative_url }}" class="text-slate-300 hover:text-amber-400 font-medium text-sm transition-colors">
           Coverage Area
         </a>
       </nav>
 
-      <!-- CTA Button -->
+      <!-- Right side: badge + CTA (desktop) / hamburger (mobile) -->
       <div class="flex items-center gap-4">
-        <span class="hidden lg:inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-slate-800 text-emerald-400 border border-emerald-500/30">
-          <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse mr-2"></span> 3 Verified Spotlights
-        </span>
-        <a href="{{ '/#directory' | relative_url }}" class="px-4 py-2.5 rounded-lg bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-sm shadow-md hover:shadow-amber-500/20 transition-all flex items-center gap-2">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5m0 0h5m-5 0V11m0 0h-5m5 0h5"></path></svg>
-          Browse Contractors
-        </a>
+        <!-- Desktop badge + CTA -->
+        <div class="hidden md:flex items-center gap-4">
+          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-slate-800 text-emerald-400 border border-emerald-500/30">
+            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse mr-2"></span> 3 Verified Spotlights
+          </span>
+          <a href="{{ '/#directory' | relative_url }}" class="px-4 py-2.5 rounded-lg bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-sm shadow-md hover:shadow-amber-500/20 transition-all flex items-center gap-2">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5m0 0h5m-5 0V11m0 0h-5m5 0h5"></path></svg>
+            Browse Contractors
+          </a>
+        </div>
+
+        <!-- Mobile Hamburger Button -->
+        <button id="mobile-menu-btn" class="md:hidden flex flex-col justify-center items-center w-10 h-10 rounded-lg bg-slate-800 border border-slate-700 hover:border-amber-500/50 transition-colors" aria-label="Toggle navigation menu" aria-expanded="false">
+          <span class="block w-5 h-0.5 bg-slate-300 transition-all duration-300 mb-1 origin-center"></span>
+          <span class="block w-5 h-0.5 bg-slate-300 transition-all duration-300 mb-1"></span>
+          <span class="block w-5 h-0.5 bg-slate-300 transition-all duration-300 origin-center"></span>
+        </button>
       </div>
     </div>
+
+    <!-- Mobile Navigation Menu -->
+    <div id="mobile-menu" class="md:hidden hidden border-t border-slate-800/60">
+      <nav class="flex flex-col py-4 space-y-1">
+        <a href="{{ '/' | relative_url }}" class="mobile-nav-link px-4 py-3 rounded-lg text-slate-200 hover:text-amber-400 hover:bg-slate-800/60 font-medium text-sm transition-colors">
+          Case Studies
+        </a>
+        <a href="{{ '/roofing-contractors/' | relative_url }}" class="mobile-nav-link px-4 py-3 rounded-lg text-slate-300 hover:text-amber-400 hover:bg-slate-800/60 font-medium text-sm transition-colors">
+          Roofing Contractors
+        </a>
+        <a href="{{ '/timber-and-carpentry/' | relative_url }}" class="mobile-nav-link px-4 py-3 rounded-lg text-slate-300 hover:text-amber-400 hover:bg-slate-800/60 font-medium text-sm transition-colors">
+          Timber &amp; Carpentry
+        </a>
+        <a href="{{ '/coverage-area/' | relative_url }}" class="mobile-nav-link px-4 py-3 rounded-lg text-slate-300 hover:text-amber-400 hover:bg-slate-800/60 font-medium text-sm transition-colors">
+          Coverage Area
+        </a>
+        <div class="border-t border-slate-800/60 mt-2 pt-3 px-4">
+          <a href="{{ '/#directory' | relative_url }}" class="mobile-nav-link block w-full text-center px-4 py-2.5 rounded-lg bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-sm shadow-md transition-all">
+            Browse Contractors
+          </a>
+        </div>
+      </nav>
+    </div>
   </div>
+
+  <!-- Mobile Menu Toggle Script -->
+  <script>
+    (function() {
+      var btn = document.getElementById('mobile-menu-btn');
+      var menu = document.getElementById('mobile-menu');
+      var lines = btn.querySelectorAll('span');
+      var links = document.querySelectorAll('.mobile-nav-link');
+      var isOpen = false;
+
+      function toggleMenu() {
+        isOpen = !isOpen;
+        menu.classList.toggle('hidden', !isOpen);
+        btn.setAttribute('aria-expanded', isOpen);
+
+        if (isOpen) {
+          // Animate to X
+          lines[0].style.transform = 'rotate(45deg) translate(4px, 4px)';
+          lines[1].style.opacity = '0';
+          lines[2].style.transform = 'rotate(-45deg) translate(4px, -4px)';
+        } else {
+          // Animate back to hamburger
+          lines[0].style.transform = '';
+          lines[1].style.opacity = '';
+          lines[2].style.transform = '';
+        }
+      }
+
+      btn.addEventListener('click', toggleMenu);
+
+      // Close menu when a link is tapped
+      links.forEach(function(link) {
+        link.addEventListener('click', function() {
+          if (isOpen) toggleMenu();
+        });
+      });
+
+      // Close menu on Escape key
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && isOpen) toggleMenu();
+      });
+    })();
+  </script>
 </header>