feat: navigation

frontend/src/components/cards/NavCard.vue

@@ -4,11 +4,6 @@ import { useRouter } from 'vue-router';
 
 const router = useRouter()
 
-const navigateTo = (path: string) => {
-  localStorage.setItem('app-selection', path)
-  router.push(path)
-}
-
 defineProps<{
     to: string
     title: string
@@ -25,7 +20,7 @@ defineProps<{
         <p class="w-56">{{ content }}</p>
       </template>
       <template #footer>
-        <Button @click="navigateTo(to)" severity="contrast" size="small">Перейти</Button>
+        <Button @click="router.push(to)" severity="contrast" size="small">Перейти</Button>
       </template>
     </Card>
 </template>

frontend/src/components/headers/VHeader.vue

@@ -1,25 +1,23 @@
 <script lang="ts" setup>
 import { Button, Toolbar } from 'primevue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import { useNavModalStore } from '../../stores/nav-modal.store';
 
 const route = useRoute()
-const router = useRouter()
-
-const logout = () => {
-    localStorage.removeItem('app-selection')
-    router.replace('/')
-}
 
+const navModalStore = useNavModalStore()
 </script>
 
 <template>
     <header >
-        <Toolbar>
+        <Toolbar style="border-radius: 0; border-top: none; border-left: none; border-right: none">
             <template #start>
                 <p class="font-bold">{{ $route.matched?.[$route.matched.length - 2]?.name }} / {{ route.name }}</p>
             </template>
             <template #end>
-                <Button severity="danger" :size="'small'" @click="logout">Выйти</Button>
+                <Button severity="secondary" size="small" @click="navModalStore.changeVisibility">
+                    <span class="pi pi-list"></span>
+                </Button>
             </template>
         </Toolbar>
     </header>

frontend/src/components/modals/NavModal.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Button, Drawer } from 'primevue';
+import { useNavModalStore } from '../../stores/nav-modal.store';
+import { useRoute, useRouter } from 'vue-router';
+
+const navModalStore = useNavModalStore()
+
+const router = useRouter()
+
+const logout = () => {
+    navModalStore.changeVisibility()
+    router.replace('/')
+}
+
+export interface Route {
+    name: string
+    path: string
+}
+
+defineProps<{
+    routes: Route[]
+}>()
+
+const route = useRoute()
+
+</script>
+
+<template>
+    <Drawer v-model:visible="navModalStore.visible">
+        <div class="flex flex-col gap-2">
+            <RouterLink :style="{ color: route.fullPath.endsWith(r.path) && 'var(--p-primary-color)' }" @click="() => {
+                navModalStore.changeVisibility()
+            }" v-for="r in routes" :to="r.path">{{ r.name }}
+            </RouterLink>
+        </div>
+        <template #footer>
+            <Button severity="danger" :size="'small'" class="w-full" @click="logout">Выйти</Button>
+        </template>
+    </Drawer>
+</template>