<header id="site-header">
  <div class="container">
    <div class="logo">
      <a href="/">{{siteOwner}}</a>
    </div>
    <button class="menu-toggle" onclick="toggleMenu()">☰ Menu</button>
    <nav class="site-nav">
      {{#each navLinks}}
      {{#if submenu}}
      <div class="dropdown">
        {{#if this.href}}
        <a href="{{this.href}}" class="dropbtn">{{this.label}}</a>
        {{else}}
        <a class="dropbtn">{{this.label}}</a>
        {{/if}}
        <div class="dropdown-content">
          {{#each submenu}}
          <a href="{{this.href}}">{{this.label}}</a>
          {{/each}}
        </div>
      </div>
      {{else}}
      <a href="{{this.href}}">{{this.label}}</a>
      {{/if}}
      {{/each}}
    </nav>
  </div>
</header>
{{#section "scripts"}}
<script>
  function toggleMenu() {
    document.getElementById("siteNav").classList.toggle("active");
  }
</script>
{{/section}}