Web/main/_includes/nav/navbar.html

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar">
    <script>
        if (dark) {
            let navbar = $("#navbar");
            navbar.removeClass("navbar-light bg-light");
            navbar.addClass("navbar-dark bg-dark");
        }
    </script>

    <!-- Navbar brand and logo -->
    <a class="navbar-brand mb-0 h1" href="#">
        <img src="/res/logo.png" width="40" height="40" alt="A pixelart version of Ellpeck"> Ellpeck.de
    </a>

    <!-- Responsive navbar menu opener -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-label="Navbar toggler">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar content -->
    <div class="collapse navbar-collapse" id="navbar-content">
        <div class="navbar-nav mr-auto" id="nav-items">
            {% if page.nav %}
                {% include {{ page.nav }} %}
            {% elsif layout.nav %}
                {% include {{ layout.nav }} %}
            {% endif %}
        </div>

        <span class="navbar-text custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="dark-mode">
            <label class="custom-control-label" for="dark-mode">🌙 Dark Mode</label>
            <script>
                let mode = $("#dark-mode");
                mode.prop("checked", dark);
                mode.on("click", function () {
                    localStorage.setItem("dark", $(this).prop("checked"));
                    location.hash = "";
                    location.reload();
                });    
            </script>
        </span>

        <script>
            $(".navbar-collapse a").on("click", () => $(".navbar-collapse").collapse("hide"));
        </script>
    </div>
</nav>