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

<nav class="navbar">
    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
    <label for="nav-toggle" aria-label="Navigation menu toggle" class="navbar__control">
        <span aria-hidden="true">☰</span> Navigation
    </label>
    <h2 class="visually-hidden">Navigation Manu</h2>
    <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__control {
        font-size: 1.3rem;
        font-weight: 700;
    }

    #nav-toggle:focus + .navbar__control,
    .navbar a:focus {
        outline: 0.15em solid var(--clr-navbar-link);
        outline-offset: 0.1em;
    }

    .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;
    }

    #nav-toggle:checked ~ .navbar__links {
        display: grid;
    }

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

        .navbar__toggle,
        .navbar__control {
            display: none;
        }

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