leilukin-site/src/_includes/global/navbar.njk

{# Accessible hamburger menu code based on:
https://kalechips.net/projects/snippets/burger #}

{% 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">
    <details class="navbar__burger">
        <summary class="navbar__toggle" id="toggle">
            <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Navigation
        </summary>
        <nav class="navbar__menu">
            <ul class="navbar__menu--links">
                {{ navLinksEl | safe }}
                <li class="skip"><a href="#toggle">Close Menu</a></li>
            </ul>
        </nav>
    </details>
    <ul class="navbar__links">
        {{ navLinksEl | safe }}
    </ul>
</nav>

<style>
    :root {
        --icon-burger: url(/assets/icons/burger.svg);
        --icon-close: url(/assets/icons/close.svg);
        --sz-icon: 2.5rem;
    }

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

    .navbar__toggle {
        color: var(--clr-navbar-link);
        font-size: 1.25rem;
        font-weight: 700;
    }

    .navbar__toggle {
        list-style-type: none;
        display: flex;
        align-items: center;
        gap: 0.3em;
        padding: 0.4em 0.6em;
        background-color: inherit;
    }

    .navbar__toggle::-webkit-details-marker {
        display: none;
    }

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

    .navbar a:focus {
        outline-offset: 0.1em;
    }

    .navbar__menu--links,
    .navbar__links {
        list-style-type: "";
        flex-wrap: wrap;
        gap: 1em;
    }

    .navbar__menu--links a,
    .navbar__links a {
        color: var(--clr-navbar-link);
        text-decoration: none;
        cursor: pointer;
        display: block;
    }

    .navbar__menu--links {
        display: flex;
        padding: 0 1em;
    }

    .skip a {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .skip a:focus {
        position: static;
        width: auto;
        height: auto;
    }

    .navbar__links {
        display: none;
        padding: 0.2em 0 0 0;
    }

    .navbar__links a:hover {
        color: var(--clr-link-hover);
    }

    .navbar__links a:focus {
        outline-offset: 0.2em;
    }

    /* Tablet screen size */
    @media only screen and (min-width: 43.75rem) {
        .navbar {
            padding: 0 0.6em;
        }

        .navbar__burger {
            display: none;
        }

        .navbar__toggle {
            display: none;
        }

        .navbar__links {
            display: flex;
            justify-content: space-evenly;
            gap: 0.5em;
            padding: 0;
        }
    }
</style>

<script>
    const navbarBurger = document.querySelector(".navbar__burger");
    navbarBurger.addEventListener("keydown", (event) => {
        if (event.key == "Escape") {
            navbarBurger.removeAttribute("open");
            navbarBurger.ariaExpanded = false;
            document.querySelector(".navbar__toggle").focus();
        }
    });
</script>