krisf/simcoetradesjournal
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add mobile hamburger menu with all navigation links

Browse Source 
- 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
This commit is contained in:
Your Name
2026-07-31 14:25:11 -04:00
parent 9951a91b53
commit 82f361462d
1 changed files with 86 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/header.html
+86 -10
View File
@@ -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>