49 lines
1.8 KiB
HTML
49 lines
1.8 KiB
HTML
{{define "header"}}
|
|
<header class="navbar">
|
|
<div class="navbar-start">
|
|
<a class="btn btn-ghost normal-case text-xl" href="/">{{template "navcontent".}}</a>
|
|
</div>
|
|
<div class="navbar-end">
|
|
<div class="dropdown dropdown-end">
|
|
<label tabindex="0" class="btn btn-ghost" id="navbar-toggle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-icon"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
|
|
</label>
|
|
<ul
|
|
tabindex="0"
|
|
class="menu dropdown-content mt-3 shadow-md rounded-box z-50 nav-menu"
|
|
id="nav-menu"
|
|
>
|
|
{{template "navitems" .}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const navbarToggle = document.getElementById('navbar-toggle');
|
|
const navMenu = document.getElementById('nav-menu');
|
|
|
|
// Toggle menu on hamburger click
|
|
navbarToggle.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
navMenu.classList.toggle('show');
|
|
});
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (!navMenu.contains(e.target) && !navbarToggle.contains(e.target)) {
|
|
navMenu.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Close menu when clicking on a menu item
|
|
const menuItems = navMenu.querySelectorAll('a');
|
|
menuItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
navMenu.classList.remove('show');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{end}}
|