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

<nav class="navbar">
    <button class="navbar__toggle" aria-label="Navigation menu toggle" aria-expanded="false">
        <span aria-hidden="true">☰</span>
        <h2 class="navbar__title">Navigation</h2>
    </button>
    <ul class="navbar__links">
        {% block navbarLinks %}
            {{ navbarLinks }}
        {% endblock %}
    </ul>
</nav>

<style>
    .navbar {
        background: var(--clr-navbar-bg);
        padding: 0.6em 1em;
        width: 100%;
        z-index: 999;
        position: sticky;
        top: 0;
    }

    .navbar__toggle,
    .navbar__title {
        color: var(--clr-navbar-link);
        font-size: 1.3rem;
    }

    .navbar__toggle {
        display: flex;
        align-items: center;
        gap: 0.3em;
        border: none;
        padding: 0;
        margin: 0;
        background-color: inherit;
    }

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

    .navbar a {
        color: var(--clr-navbar-link);
        text-decoration: none;
        cursor: pointer;
    }

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

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

    .navbar__links {
        list-style: none;
        display: none;
        gap: 1em;
        padding: 0.5em 1.8em;
        overflow: auto;
    }

    .navbar__links--show {
        display: grid;
    }

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

        .navbar__toggle {
            display: none;
        }

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

<script defer>
    {# Accessible hamburger menu navigation script based on:
    https://accessibleweb.dev/navigation #}
    const navbarToggle = document.querySelector(".navbar__toggle");
    const navbarLinks = document.querySelector(".navbar__links");
    const navbarLinkItems = document.querySelectorAll(".navbar__links li a");

    const openNavigation = () => {
        navbarLinks.classList.add("navbar__links--show");
        navbarToggle.ariaExpanded = "true";
    };

    const closeNavigation = () => {
        navbarLinks.classList.remove("navbar__links--show");
        navbarToggle.ariaExpanded = "false";
    };

    const toggleNavigation = () => {
        const open = navbarToggle.ariaExpanded;
        open === "false" ? openNavigation() : closeNavigation();
    }

    navbarToggle.addEventListener("click", toggleNavigation);

    window.addEventListener("keyup", (e) => {
        if (e.key === "Escape") {
            navbarToggle.focus();
            closeNavigation();
        }
    });
</script>