Reintroduce burger nav

views/partials/nav.eta

@@ -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>

views/user_select.eta

@@ -6,7 +6,7 @@
 </section>
 <hidden>
 	<!-- Base Button -->
-	<button class="button is-link is-medium m-2" id="baseStruct">Username</button>
+	<button class="button is-dark is-medium m-2" id="baseStruct">Username</button>
 </hidden>
 <div class="modal" id="pinPadModal">
   <div class="modal-background"></div>