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 05a3d15d4f33189b73b6f1d2e8cd753df7bb2cc2..c828d7fefda58bb954292e5730f8e95d185d8c2f 100644 (file)
--- 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") }}