29 lines
1.2 KiB
Plaintext
29 lines
1.2 KiB
Plaintext
<nav class="c-nav">
|
|
<ul class="c-nav__list">
|
|
<li>
|
|
<a href="/" class="c-nav__home">
|
|
<span class="c-nav__logo">{% include "icons/logo.svg" %}</span>
|
|
<span class="c-nav__nav-item c-nav__home-text {{ 'c-nav__nav-item--active' if page.url == '/' }}">Home</span>
|
|
</a>
|
|
</li>
|
|
{% for navItem in nav %}
|
|
<li>
|
|
<a href="{{ navItem.url }}" class="c-nav__nav-item {{ 'c-nav__nav-item--active' if page.url == navItem.url }}">{{ navItem.text }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<div x-data="{ searchOpen: false }">
|
|
<button class="c-search__search-toggle" @click="
|
|
searchOpen = !searchOpen;
|
|
$nextTick(() => document.querySelector('#search').focus(
|
|
));
|
|
">
|
|
<span class="u-sr-only">Search</span>
|
|
<span x-show="!searchOpen">{% include "icons/search.svg" %}</span>
|
|
<span x-show="searchOpen" x-cloak>{% include "icons/close.svg" %}</span>
|
|
</button>
|
|
<div x-show="searchOpen" @click.away="searchOpen = false" x-cloak>
|
|
{% include "components/search.njk" %}
|
|
</div>
|
|
</div>
|
|
</nav> |