From 4ce2e05dc8801cf31d6b3ee634ba390fd64bd8e0 Mon Sep 17 00:00:00 2001
From: Jonas <familiehimmelberg@gmail.com>
Date: Sun, 9 Nov 2025 20:15:07 +0100
Subject: [PATCH] Add persistent navigation drawer to layout

Introduces a navigation drawer that can be toggled and persists its state in localStorage. The drawer displays route items and adapts its location and permanence based on device type. Also refactors initial drawer visibility and updates the app bar navigation icon to toggle the drawer.
---
 GUI/src/Layout.vue              | 29 +++++++++++++++++++++++++++--
 GUI/src/plugins/routesLayout.ts |  2 +-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/GUI/src/Layout.vue b/GUI/src/Layout.vue
index e91cd6c..fbfe62e 100644
--- a/GUI/src/Layout.vue
+++ b/GUI/src/Layout.vue
@@ -6,15 +6,21 @@ import { useRoute } from 'vue-router';
 
 const theme = useTheme();
 const route = useRoute();
-const showDrawer = ref(false);
+const showDrawer = ref(true);
 
 function changeTheme() {
     theme.toggle();
     localStorage.setItem("theme", theme.name.value);
 }
 
+function toggleDrawer() {
+    showDrawer.value = !showDrawer.value;
+    localStorage.setItem("drawer", showDrawer.value ? "Y" : "N")
+}
+
 onMounted(() => {
     theme.change(localStorage.getItem("theme") || "light");
+    showDrawer.value = localStorage.getItem("drawer")?.startsWith("Y") || false;
 });
 </script>
 
@@ -27,7 +33,7 @@ onMounted(() => {
         />
       </template>
       <template v-slot:prepend>
-        <v-app-bar-nav-icon></v-app-bar-nav-icon>
+        <v-app-bar-nav-icon @click="toggleDrawer()"></v-app-bar-nav-icon>
       </template>
       
       <v-app-bar-title class="title">
@@ -43,6 +49,25 @@ onMounted(() => {
       <v-btn icon="mdi-brightness-6" @click="changeTheme()"></v-btn>
     </v-app-bar>
 
+    <v-navigation-drawer
+      v-model="showDrawer"
+      :location="$vuetify.display.mobile ? 'bottom' : undefined"
+      :permanent="!$vuetify.display.mobile"
+    >
+      <v-list>
+        <v-list-item
+          v-for="item in routesLayout"
+          :key="item.path"
+          :to="item.path"
+          :active="route.path === item.path"
+          link
+          :prepend-icon="item.icon"
+          :title="item.name"
+        >
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
     <v-main>
       <router-view></router-view>
     </v-main>
diff --git a/GUI/src/plugins/routesLayout.ts b/GUI/src/plugins/routesLayout.ts
index eeb96a6..3c4ebaa 100644
--- a/GUI/src/plugins/routesLayout.ts
+++ b/GUI/src/plugins/routesLayout.ts
@@ -4,5 +4,5 @@ export default [
         name: "Startseite",
         description: "Übersicht der Anwendung",
         icon: "mdi-home",
-    },
+    }
 ]
\ No newline at end of file