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

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