{{define "header"}}
<header class="navbar">
    <div class="navbar-start">
      <a class="btn btn-ghost normal-case text-xl" href="/">{{template "navcontent".}}</a>
    </div>
    <div class="navbar-end">
      <div class="dropdown dropdown-end">
        <label tabindex="0" class="btn btn-ghost" id="navbar-toggle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
        </label>
        <ul
          tabindex="0"
          class="menu dropdown-content mt-3 shadow-md rounded-box z-50 nav-menu"
          id="nav-menu"
        >
          {{template "navitems" .}}
        </ul>
      </div>
    </div>
  </header>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const navbarToggle = document.getElementById('navbar-toggle');
      const navMenu = document.getElementById('nav-menu');
      
      // Toggle menu on hamburger click
      navbarToggle.addEventListener('click', function(e) {
        e.stopPropagation();
        navMenu.classList.toggle('show');
      });
      
      // Close menu when clicking outside
      document.addEventListener('click', function(e) {
        if (!navMenu.contains(e.target) && !navbarToggle.contains(e.target)) {
          navMenu.classList.remove('show');
        }
      });
      
      // Close menu when clicking on a menu item
      const menuItems = navMenu.querySelectorAll('a');
      menuItems.forEach(item => {
        item.addEventListener('click', function() {
          navMenu.classList.remove('show');
        });
      });
    });
  </script>
{{end}}
