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

Refactor navbar to dynamically inject buttons

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

105
views/partials/nav.eta
View File

@ -2,74 +2,67 @@
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item primary" href="/"> <a class="navbar-item primary" href="/">
<i class="bi bi-cup-straw"></i> <i class="bi bi-cup-straw"></i>
</a> </a>
<a class="navbar-item primary is-hidden" id="nav_username" href="/">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <strong>Hey, <span id="nav_usernameContent"></span></strong>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a> </a>
</div> </div>
<div id="navbarBasicExample" class="navbar-menu"> <div id="navbarBasicExample" class="navbar-menu is-active">
<div class="navbar-start">
<a class="navbar-item" href="/">Screensaver</a>
<a class="navbar-item" href="/user_select">user_select</a>
<a class="navbar-item" href="/product_select">product_select</a>
<a class="navbar-item" href="/test">Test <span class="tag is-info">Dev</span></a>
<!--<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<a class="navbar-item is-selected">Jobs</a>
<a class="navbar-item">Contact</a>
<hr class="navbar-divider">
<a class="navbar-item">Report an issue</a>
</div>
</div>-->
</div>
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item is-hidden" id="showOnLogin"> <div class="navbar-item" id="dynamic-navbar-buttons">
<strong>Hey, <span id="nav_username"></span></strong> <!-- Buttons will be dynamically injected here -->
<button class="button" onclick="window.location='/pay_up'" >Zur Abrechnung</button>
</div>
<div class="navbar-item is-hidden" id="onlyShowRoot">
<button class="button" onclick="window.location='/admin/'" >Zur Administration</button>
</div>
<div class="navbar-item is-hidden" id="onlyShowAdmin">
<button class="button" onclick="window.location='/admin/'" >Zur Administration</button>
<button class="button" onclick="window.location='/'" >Abmelden</button>
</div> </div>
</div> </div>
<script> <script>
// Check if ?user is set document.addEventListener('DOMContentLoaded', () => {
if (window.location.search.includes('user')) { const navbarButtons = document.getElementById('dynamic-navbar-buttons');
// Show the sign up button const currentPath = window.location.pathname;
document.querySelector('#showOnLogin').classList.remove('is-hidden'); const queryParams = new URLSearchParams(window.location.search);
// Get the username from the cookie
username = document.cookie.split('; ').find(row => row.startsWith('name')).split('=')[1]; const buttonsConfig = {
// Set the username in the nav '/user_select': [
document.getElementById('nav_username').innerText = username; { text: '', icon: 'bi bi-gear', link: '/admin' }
],
'/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
}
} }
// Check if /user_select is the current page const buttons = buttonsConfig[currentPath] || [];
if (window.location.pathname == '/user_select') { buttons.forEach(button => {
// Show the sign up button const btn = document.createElement('button');
document.querySelector('#onlyShowRoot').classList.remove('is-hidden'); 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) {
// If admin is contained in url btn.appendChild(document.createTextNode(button.text));
if (window.location.pathname.includes('admin')) {
// Show the sign up button
document.querySelector('#onlyShowAdmin').classList.remove('is-hidden');
} }
navbarButtons.appendChild(btn);
});
});
</script> </script>
</div> </div>
</nav> </nav>