60 lines
1.5 KiB
Text
60 lines
1.5 KiB
Text
<!-- toggle drawer menu in _data/meta.js -->
|
|
{% set drawerNav = meta.navigation.drawerNav %}
|
|
|
|
<nav
|
|
id="mainnav"
|
|
class="mainnav
|
|
{% if drawerNav %}
|
|
drawernav
|
|
{% endif %}"
|
|
aria-label="{{ meta.navigation.ariaTop }}"
|
|
>
|
|
<ul class="cluster" role="list">
|
|
{% for item in navigation.top %}
|
|
<li>
|
|
<a
|
|
href="{{ item.url }}"
|
|
{{
|
|
helpers.getLinkActiveState(item.url,
|
|
page.url)
|
|
|
|
|
safe
|
|
}}
|
|
>{{ item.text }}</a
|
|
>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</nav>
|
|
|
|
{% if drawerNav %}
|
|
<!-- template element holding a button that needs to be injected when JavaScript is finally available. -->
|
|
<!-- based on solution by Manuel Matuzovic, https://web.dev/website-navigation/ and the Web Accessibility Cookbook -->
|
|
<!-- see also: https://kittygiraudel.com/2022/09/30/templating-in-html/ -->
|
|
|
|
<template id="burger-template">
|
|
<button type="button" aria-expanded="false" aria-controls="mainnav">
|
|
<span>{{ meta.navigation.navLabel }}</span>
|
|
|
|
<svg
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M5 12h14" />
|
|
<path d="M12 5v14" />
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
{% endif %}
|
|
|
|
{% if drawerNav %}
|
|
{% js "defer" %}
|
|
{% include "scripts/nav-drawer.js" %}
|
|
{% endjs %}
|
|
{% endif %}
|