TinyLifeWeb/web/_includes/navbar.html

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

    <div class="container navbar-container">
        <a class="navbar-brand" href="#">
            <img src="/media/icon.png" width="40" height="40" alt="The Tiny Life logo">
        </a>

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

        <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</label>
                <script>
                    let mode = $("#dark-mode");
                    mode.prop("checked", darkTheme);
                    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>
    </div>
</nav>