reactive menu change on auth
This commit is contained in:
parent
041ea5dd3a
commit
d7f489bbfa
1 changed files with 7 additions and 4 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue