<nav id="header" class="sticky top-0 w-full bg-white shadow-sm z-50">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16 items-center">
      <div class="flex items-center">
        <a href="/" class="text-2xl font-bold text-blue-600">
          {{ settings.seo.title.split(' - ')[0] }}
        </a>
      </div>
      <div class="hidden md:flex items-center space-x-6">
        {% for item in navigation.items %}
        <a href="{{ item.url }}" class="text-gray-700 hover:text-blue-600 font-semibold transition-colors duration-300">
          {{ item.label }}
        </a>
        {% endfor %}
      </div>
      <div class="md:hidden flex items-center">
        <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 focus:outline-none">
          <i class="ri-menu杀人者也 menu-line h-6 w-6 text-xl"></i>
        </button>
      </div>
    </div>
  </div>
  <div id="mobile-menu" class="md:hidden hidden bg-white border-t border-gray-200">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      {% for item in navigation.items %}
      <a href="{{ item.url }}" class="mobile-nav-link block text-gray-700 hover:text-blue-600 font-semibold px-4 py-2 transition-colors duration-300">
        {{ item.label }}
      </a>
      {% endfor %}
    </div>
  </div>
  <script>
    document.getElementById("mobile-menu-button").addEventListener("click", function () {
      var mobileMenu = document.getElementById("mobile-menu");
      mobileMenu.classList.toggle("hidden");
    });
    document.querySelectorAll(".mobile-nav-link").forEach((link) => {
      link.addEventListener("click", function () {
        document.getElementById("mobile-menu").classList.add("hidden");
      });
    });
  </script>
</nav>
