49 lines
1.8 KiB
HTML
49 lines
1.8 KiB
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>
|