feat: navigation

frontend/src/App.vue

@@ -16,7 +16,7 @@ const errorStore = useErrorStore();
         <template #header> Ошибка </template>
         <h1 class="text-red-500 text-2xl">{{ errorStore.message }}</h1>
     </Dialog>
-    <VHeader v-if="$route?.matched?.length > 1" />
+    <VHeader v-if="$route?.matched?.length > 1"  />
     <main>
        <RouterView />
     </main>

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>

frontend/src/main.ts

@@ -9,6 +9,7 @@ import { createPinia } from 'pinia'
 import { router } from './router/router'
 import Tooltip from 'primevue/tooltip'
 
+
 createApp(App).directive('tooltip', Tooltip).use(router).use(createPinia()).use(Config, {
     theme: {
         preset: Aura,

frontend/src/pages/pages/GrebenPage.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>GREBEN</h1>
+</template>

frontend/src/pages/pages/UserPage.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { RouterView, useRoute, type RouteRecordRaw } from 'vue-router';
+import NavModal, { type Route } from '../../components/modals/NavModal.vue';
+import { routes } from '../../router/router';
+
+const route = useRoute()
+
+const lastRouteName = route.matched[route.matched.length - 2].path
+</script>
+
+<template>
+    <NavModal :routes="<Route[]>routes[routes.findIndex(r => r.path == lastRouteName)].children" />
+    <RouterView />
+</template>

frontend/src/pages/user/UserPage.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router';
-
-
-</script>
-
-<template>
-    <RouterView />
-</template>

frontend/src/router/router.ts

@@ -1,7 +1,8 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
 import Index from "../pages/Index.vue";
-import UserPage from "../pages/user/UserPage.vue";
+import UserPage from "../pages/pages/UserPage.vue";
 import PostTablePage from "../pages/tables/PostTablePage.vue";
+import GrebenPage from "../pages/pages/GrebenPage.vue";
 
 export const routes: RouteRecordRaw[] = [{
     path: "/",
@@ -17,9 +18,13 @@ export const routes: RouteRecordRaw[] = [{
             component: PostTablePage,
             path: '/user/post',
             name: 'Новости'
+        }, {
+            component: GrebenPage,
+            path: '/user/greben',
+            name: 'Страница гребня'
         }
     ]
-}]
+}] as const
 
 export const router = createRouter({
     history: createWebHistory(),

frontend/src/stores/nav-modal.store.ts

@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+
+export interface NavModalState {
+    visible: boolean
+}
+
+export const useNavModalStore = defineStore('nav-modal', {
+    state: (): NavModalState => ({
+        visible: false
+    }),
+    actions: {
+        changeVisibility() {
+            this.visible = !this.visible
+        }
+    }
+})