From d7f489bbfa913ae51554c8b1c2fa61d68e7691ac Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Sun, 14 Sep 2025 11:39:37 +0300
Subject: [PATCH] reactive menu change on auth

---
 src/components/Navbar/NavBar.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Navbar/NavBar.vue b/src/components/Navbar/NavBar.vue
index 2b1936a..f91f13d 100644
--- a/src/components/Navbar/NavBar.vue
+++ b/src/components/Navbar/NavBar.vue
@@ -6,13 +6,16 @@ import { RouterLink, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/authStore'
 
 const authStore = useAuthStore()
-const { isAuthenticated } = authStore
 
 const showMobileMenu = ref(false)
 
 const route = useRoute()
 const activeKey = ref('collection')
 
+watch(() => authStore.isAuthenticated, (newVal) => {
+  console.log('Auth state changed:', newVal)
+}, { immediate: true })
+
 const mainMenu = computed(() => {
   return [
     { label: 'Collection', key: 'collection' },
@@ -22,7 +25,7 @@ const mainMenu = computed(() => {
 })
 
 const authMenu = computed(() => {
-  if (!isAuthenticated) {
+  if (!authStore.isAuthenticated) {
     return [
       { label: 'Login', key: 'login' }
     ]
@@ -72,7 +75,7 @@ const renderLabel = (option) => {
       :collapsed="false"
       :value="activeKey"
       @update:value="activeKey = $event"
-      v-if="isAuthenticated && windowWidth > 768"
+      v-if="authStore.isAuthenticated && windowWidth > 768"
       :render-label="renderLabel"
     />
 
@@ -100,7 +103,7 @@ const renderLabel = (option) => {
 
     <n-drawer v-model:show="showMobileMenu" placement="right">
       <n-menu
-        :options="isAuthenticated ? [...mainMenu, ...authMenu] : authMenu"
+        :options="authStore.isAuthenticated ? [...mainMenu, ...authMenu] : authMenu"
         mode="vertical"
         :value="activeKey"
         @update:value="activeKey = $event; showMobileMenu = false"