{% set navLinksEl %}
    {%- if tags and tags.includes("shrine pages") %}
        <li>
            <a {% if currentUrl === shrineHomeUrl %}aria-current="page"{% endif %} href="{{ shrineHomeUrl }}">Shrine Home</a>
        </li>
    {%- endif -%}
    {% block navbarLinks %}{% endblock %}
    {%- if tags and tags.includes("shrine pages") %}
        <li><a href="/shrines/">Shrine Directory</a></li>
        <li><a href="/">Main Site</a></li>
    {%- endif -%}
{% endset %}

<nav class="navbar" aria-labelledby="top-level-nav-title">
    <h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
    <ul class="navbar__menu navbar__links">{{ navLinksEl | safe }}</ul>
    <button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
        <svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
        Navigation
    </button>
</nav>
<div popover id="nav-menu" class="navbar__popover">
    <ul class="navbar__menu">{{ navLinksEl | safe }}</ul>
</div>

{%- css %}
    .navbar {
        background: var(--clr-navbar-bg);
        width: 100%;
        z-index: 998;
        position: sticky;
        top: 0;
        padding: 0.6em;
    }

    .navbar__menu {
        list-style-type: "";
        margin: 0;
        padding: 0;
        display: flex;
        gap: 1em;
        flex-wrap: wrap;
        text-align: center;
    }

    .navbar__menu a {
        color: var(--clr-navbar-link);
        text-decoration: none;
        font-weight: 700;
        cursor: pointer;
        display: inline-block;
    }

    .navbar__menu a:hover { color: var(--clr-link-hover); }
    .navbar__menu a:focus { outline-offset: 0.2em; }

    .navbar__links {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 0.5em;
    }

    .navbar__toggle {
        background-color: inherit;
        color: var(--clr-navbar-link);
        border: none;
        padding: 0;
        font-size: 1.25rem;
        font-weight: 700;
        display: none;
        align-items: center;
        gap: 0.3em;
    }

    .navbar__toggle svg { fill: currentColor; }

    .navbar__toggle:focus,
    .navbar__menu a:focus { outline-offset: 0.1em; }
    .navbar__toggle:focus,
    .navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }

    .navbar__popover {
        background: var(--clr-navbar-bg);
        border: 0.15em solid var(--clr-navbar-link);
        padding: 1.5em;
        max-width: 85%;
    }

    .navbar__popover::backdrop {
        background-color: black;
        opacity: 0.5;
    }

    @supports selector([popover]) {
        .navbar__toggle { display: flex; }
        .navbar__links { display: none; }
    }

    /* Tablet screen size */
    @media only screen and (min-width: 43.75rem) {
        .navbar { padding: 1em 0.6em; }
        .navbar__toggle, .navbar__popover { display: none; }
        .navbar__links { display: flex; }
    }
{% endcss %}