ese-website/_includes/header.njk

44 lines
1.3 KiB
Plaintext

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