From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 8 Jul 2025 16:12:34 +0000 (+0000)
Subject: frontend: Add the burger button to toggle the navbar
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e831d06cdcb0ca196ea9d034331f267da4f83d76;p=pbs.git

frontend: Add the burger button to toggle the navbar

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 05a3d15d..c828d7fe 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-	import { RouterLink, RouterView } from "vue-router"
+	import { ref } from "vue";
+	import { RouterLink, RouterView } from "vue-router";
 
 	// Components
 	import Container from "@/components/Container.vue";
@@ -13,6 +14,13 @@
 	import { useEvents } from "@/composables/events"
 	const { isConnected } = useEvents()
 
+	// Is the Navigation open?
+	const navbarIsOpen = ref(false);
+
+	function toggleNavbar() {
+		navbarIsOpen.value = !navbarIsOpen.value;
+	}
+
 	// Current Timestamp
 	const now = new Date();
 </script>
@@ -26,9 +34,16 @@
 						Pakfire Build Service<span class="has-text-primary">_</span>
 					</strong>
 				</RouterLink>
+
+				<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
+						:class="{ 'is-active': navbarIsOpen }" @click="toggleNavbar">
+					<span aria-hidden="true"></span>
+					<span aria-hidden="true"></span>
+					<span aria-hidden="true"></span>
+				</a>
 			</div>
 
-			<div class="navbar-menu">
+			<div class="navbar-menu" :class="{ 'is-active': navbarIsOpen }">
 				<div class="navbar-start">
 					<RouterLink to="/packages" class="navbar-item">
 						{{ $t("Packages") }}