Project-Name-Here/hydrationhub
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reintroduce burger nav

Browse Source
This commit is contained in:
Leon Meier 2025-04-21 21:24:52 +02:00
parent ccbcb94449
commit c38be00f73
1 changed files with 69 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
views/partials/nav.eta
View File

@ -6,64 +6,81 @@
<a class="navbar-item primary is-hidden" id="nav_username" href="/">
<strong>Hey, <span id="nav_usernameContent"></span></strong>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu is-active">
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item" id="dynamic-navbar-buttons">
<!-- Buttons will be dynamically injected here -->
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const navbarButtons = document.getElementById('dynamic-navbar-buttons');
const currentPath = window.location.pathname;
const queryParams = new URLSearchParams(window.location.search);
const buttonsConfig = {
'/user_select': [
{ text: '', icon: 'bi bi-gear', link: '/admin' },
{ text: '', icon: 'bi bi-house', link: '/user_select' }
],
'/product_select': [
{ text: 'Zur Abrechnung', link: '/pay_up' },
{ text: '', icon: 'bi bi-gear', link: '/admin' },
{ text: '', icon: 'bi bi-box-arrow-right', link: '/user_select' }
],
'/pay_up': [
{ text: '', icon: 'bi bi-gear', link: '/admin' },
{ text: '', icon: 'bi bi-box-arrow-right', link: '/user_select' }
],
'/admin': [
{ text: '', icon: 'bi bi-gear', link: '/admin' },
{ text: '', icon: 'bi bi-house', link: '/user_select' }
]
};
if (currentPath === '/product_select' && queryParams.has('user')) {
const username = document.cookie.split('; ').find(row => row.startsWith('name'))?.split('=')[1];
if (username) {
document.getElementById('nav_usernameContent').innerText = username; // Set greeting
document.getElementById('nav_username').classList.remove('is-hidden'); // Show greeting
}
}
const buttons = buttonsConfig[currentPath] || [];
buttons.forEach(button => {
const btn = document.createElement('button');
btn.className = 'button';
btn.onclick = () => window.location = button.link;
if (button.icon) {
const icon = document.createElement('i');
icon.className = button.icon;
btn.appendChild(icon);
}
if (button.text) {
btn.appendChild(document.createTextNode(button.text));
}
navbarButtons.appendChild(btn);
});
});
</script>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const navbarButtons = document.getElementById('dynamic-navbar-buttons');
const currentPath = window.location.pathname;
const queryParams = new URLSearchParams(window.location.search);
const buttonsConfig = {
'/user_select': [
{ text: '', icon: 'bi bi-gear', link: '/admin' },
{ text: '', icon: 'bi bi-house', link: '/user_select' }
],
'/product_select': [
{ text: 'Zur Abrechnung', link: '/pay_up' },
{ text: '', icon: 'bi bi-gear', link: '/admin' },
{ text: '', icon: 'bi bi-box-arrow-right', link: '/user_select' }
],
'/pay_up': [
{ text: '', icon: 'bi bi-gear', link: '/admin' },
{ text: '', icon: 'bi bi-box-arrow-right', link: '/user_select' }
],
'/admin': [
{ text: '', icon: 'bi bi-gear', link: '/admin' },
{ text: '', icon: 'bi bi-house', link: '/user_select' }
]
};
if (currentPath === '/product_select' && queryParams.has('user')) {
const username = document.cookie.split('; ').find(row => row.startsWith('name'))?.split('=')[1];
if (username) {
document.getElementById('nav_usernameContent').innerText = username; // Set greeting
document.getElementById('nav_username').classList.remove('is-hidden'); // Show greeting
}
}
const buttons = buttonsConfig[currentPath] || [];
buttons.forEach(button => {
const btn = document.createElement('button');
btn.className = 'button';
btn.onclick = () => window.location = button.link;
if (button.icon) {
const icon = document.createElement('i');
icon.className = button.icon;
btn.appendChild(icon);
}
if (button.text) {
btn.appendChild(document.createTextNode(button.text));
}
navbarButtons.appendChild(btn);
});
// Burger menu toggle
const burger = document.querySelector('.navbar-burger');
const menu = document.querySelector('.navbar-menu');
if (burger && menu) {
burger.addEventListener('click', () => {
burger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
}
});
</script>
</nav>