From c6e441dc26598255f47ccc756de6f2db39caeabe Mon Sep 17 00:00:00 2001
From: Spacelord <git@spacelord.de>
Date: Mon, 21 Apr 2025 21:02:11 +0200
Subject: [PATCH] Refactor navbar to dynamically inject buttons

---
 views/partials/nav.eta | 111 +++++++++++++++++++----------------------
 1 file changed, 52 insertions(+), 59 deletions(-)

diff --git a/views/partials/nav.eta b/views/partials/nav.eta
index d4ae396..60b3e50 100644
--- a/views/partials/nav.eta
+++ b/views/partials/nav.eta
@@ -2,74 +2,67 @@
 	<div class="navbar-brand">
 		<a class="navbar-item primary" href="/">
 			<i class="bi bi-cup-straw"></i>
-
-
 		</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>
-			<span aria-hidden="true"></span>
+		<a class="navbar-item primary is-hidden" id="nav_username" href="/">
+			<strong>Hey, <span id="nav_usernameContent"></span></strong>
 		</a>
 	</div>
 
-	<div id="navbarBasicExample" class="navbar-menu">
-		<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 id="navbarBasicExample" class="navbar-menu is-active">
+		<div class="navbar-end">
+			<div class="navbar-item" id="dynamic-navbar-buttons">
+				<!-- Buttons will be dynamically injected here -->
+			</div>
 		</div>
-
-		 <div class="navbar-end">
-			<div class="navbar-item is-hidden" id="showOnLogin">
-				<strong>Hey, <span id="nav_username"></span></strong>
-				<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> 
 		<script>
-			// Check if ?user is set
-			if (window.location.search.includes('user')) {
-				// Show the sign up button
-				document.querySelector('#showOnLogin').classList.remove('is-hidden');
-				// Get the username from the cookie
-				username = document.cookie.split('; ').find(row => row.startsWith('name')).split('=')[1];
-				// Set the username in the nav
-				document.getElementById('nav_username').innerText = username;
-			}
+			document.addEventListener('DOMContentLoaded', () => {
+				const navbarButtons = document.getElementById('dynamic-navbar-buttons');
+				const currentPath = window.location.pathname;
+				const queryParams = new URLSearchParams(window.location.search);
 
-			// Check if /user_select is the current page
-			if (window.location.pathname == '/user_select') {
-				// Show the sign up button
-				document.querySelector('#onlyShowRoot').classList.remove('is-hidden');
-			}
+				const buttonsConfig = {
+					'/user_select': [
+						{ 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 admin is contained in url
-			if (window.location.pathname.includes('admin')) {
-				// Show the sign up button
-				document.querySelector('#onlyShowAdmin').classList.remove('is-hidden');
-			}
+				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>
 </nav>