From 8d8beea7f1335b3a52470f8191cff9728a43d3e5 Mon Sep 17 00:00:00 2001
From: aarizona <ar.ariz.arizona@gmail.com>
Date: Thu, 29 Aug 2024 13:13:37 +0300
Subject: [PATCH] back forward btn

---
 front/src/assets/nav.scss    |  5 +++++
 front/src/components/nav.vue | 21 +++++++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/front/src/assets/nav.scss b/front/src/assets/nav.scss
index 413f71e..6b40ee4 100644
--- a/front/src/assets/nav.scss
+++ b/front/src/assets/nav.scss
@@ -29,6 +29,11 @@ $white: #fff;
         color: $white;
         cursor: pointer;
 
+        &.disabled {
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
         a,
         a[href].router-link-active {
             color: $white;
diff --git a/front/src/components/nav.vue b/front/src/components/nav.vue
index 69d930a..8feab9e 100644
--- a/front/src/components/nav.vue
+++ b/front/src/components/nav.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { useItem } from '../stores/item';
 
 const route = useRoute()
+const router = useRouter()
+
 const page = useItem()
 
-// console.log(route.name)
+console.log(router)
 </script>
 <template>
     <div class="nav">
@@ -22,16 +23,20 @@ const page = useItem()
                     <i-mdi:video-3d />
                 </RouterLink>
             </span>
-            <span class="nav-icon" style="font-size: 1.375rem;">
+            <span class="nav-icon" style="font-size: 1.375rem;" v-if="false">
                 <i-mdi:vector-arrange-below />
             </span>
         </div>
         <div class="nav-group">
-            <span class="nav-icon">
-                <i-mdi:arrow-left />
+            <span class="nav-icon" :class="[{ disabled: router.options.history.state.back == null }]">
+                <RouterLink :to="router.options.history.state.back" @click.prevent="router.back()">
+                    <i-mdi:arrow-left />
+                </RouterLink>
             </span>
-            <span class="nav-icon">
-                <i-mdi:arrow-right />
+            <span class="nav-icon" :class="[{ disabled: router.options.history.state.forward == null }]">
+                <RouterLink :to="router.options.history.state.forward" @click.prevent="router.forward()">
+                    <i-mdi:arrow-right />
+                </RouterLink>
             </span>
         </div>
         <div class="nav-content">