Web/main/_includes/nav/navbar.html

36 lines
1.4 KiB
HTML
Raw Normal View History

<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">
<div class="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>
</div>
</span>
</div>
</nav>