<header>
  <div id="header-veil"></div>
  <div class="header-container content">
    <a id="header-logo" href="{{ "/" | locale_url }}" title="home">
      <img alt="ESE {{ese.year}} Logo" src="/ESELogo.svg">
    </a>
    <nav id="mainNav">
      <button id="menu-toggle" onclick="toggleMenu()" aria-expanded="false"
        aria-label="{{ 'menu' if lang == 'en' else 'Menü' }}">
        {% icon "solid:bars" %}
      </button>

      {% set navPages = collections.mainNav | pageLang | eleventyNavigation %}
      <ul>
        {%- for entry in navPages -%}
        <li>
          <a class="nav-item {%- if entry.url == page.url %} active{% endif %}"
            href="{{ entry.url }}">{{ entry.title }}</a>
        </li>
        {%- endfor %}
        <li>
          <a class="nav-item-stream" href="https://stream.ifsr.de/" target="_blank" rel="noopener">Stream</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

{% css %}
  {% include "header.css" %}
{% endcss %}

{% js %}
  function toggleMenu() {
    const menuToggle = document.getElementById("menu-toggle");
    const mainNav = document.getElementById("mainNav");
    const expanded = menuToggle.getAttribute("aria-expanded") === "true";

    menuToggle.setAttribute("aria-expanded", !expanded);
    mainNav.classList.toggle("open");
    document.body.classList.toggle("noscroll");
  }
{% endjs %}