TinyLifeWeb/web/_includes/navbar.html

45 lines
1.7 KiB
HTML
Raw Normal View History

2022-05-31 21:44:35 +02:00
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light" id="navbar">
2023-06-13 17:24:58 +02:00
<script>
if (darkTheme) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}
</script>
2022-05-31 21:44:35 +02:00
<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">
2022-05-31 21:44:35 +02:00
<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 %}
2023-06-01 23:02:09 +02:00
{% include {{ page.nav }} %}
{% elsif layout.nav %}
{% include {{ layout.nav }} %}
2022-05-31 21:44:35 +02:00
{% endif %}
</div>
2023-06-13 17:24:58 +02:00
<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>
2023-06-19 10:44:55 +02:00
<script>
let mode = $("#dark-mode");
mode.prop("checked", darkTheme);
mode.on("click", function () {
localStorage.setItem("dark", $(this).prop("checked"));
location.hash = "";
location.reload();
});
</script>
2023-06-13 17:24:58 +02:00
</span>
2022-05-31 21:44:35 +02:00
</div>
</div>
2023-06-01 23:02:09 +02:00
</nav>