merch-tracker-v2/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reactive menu change on auth

Browse source
This commit is contained in:
nquidox 2025-09-14 11:39:37 +03:00
parent 041ea5dd3a
commit d7f489bbfa
1 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/Navbar/NavBar.vue
View file

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