simcoetradesjournal/_includes/header.html

<header class="sticky top-0 z-50 glass-nav">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-20">
      <!-- Logo & Brand Title -->
      <a href="{{ '/' | relative_url }}" class="flex items-center gap-3 group">
        <div class="w-10 h-10 rounded-lg bg-amber-500 flex items-center justify-center text-slate-950 font-extrabold text-xl shadow-lg shadow-amber-500/30 group-hover:scale-105 transition-transform">
          STJ
        </div>
        <div>
          <span class="text-xl font-extrabold tracking-tight text-white block leading-none font-heading">
            SIMCOE <span class="text-amber-400">TRADES</span>
          </span>
          <span class="text-xs font-medium text-slate-400 tracking-wider uppercase block mt-1">
            Verified Contractor Spotlights
          </span>
        </div>
      </a>

      <!-- 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
        </a>
        <a href="{{ '/roofing-contractors/' | relative_url }}" class="text-slate-300 hover:text-amber-400 font-medium text-sm transition-colors">
          Roofing Contractors
        </a>
        <a href="{{ '/electrical-contractors/' | relative_url }}" class="text-slate-300 hover:text-amber-400 font-medium text-sm transition-colors">
          Electrical Contractors
        </a>
        <a href="{{ '/timber-and-carpentry/' | relative_url }}" class="text-slate-300 hover:text-amber-400 font-medium text-sm transition-colors">
          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>

      <!-- Right side: badge + CTA (desktop) / hamburger (mobile) -->
      <div class="flex items-center gap-4">
        <!-- 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> 4 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="{{ '/electrical-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">
          Electrical 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>