reactive menu change on auth

This commit is contained in:
nquidox 2025-09-14 11:39:37 +03:00
parent 041ea5dd3a
commit d7f489bbfa

View file

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