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