<nav class="c-nav">
    <ul class="c-nav__list">
        {% for navItem in nav.items %}
            <li>
                {% if navItem.url == "/" %}
                    <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 == '/' }}">{{ navItem.text }}</span>
                    </a>
                {% else%}
                    <a href="{{ navItem.url }}" class="c-nav__nav-item {{ 'c-nav__nav-item--active' if page.url == navItem.url }}">{{ navItem.text }}</a>
                {% endif %}
            </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>