60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { computed, ref, watch } from 'vue'
|
||
|
|
import ClientSidebarMenuNode from '@/components/ClientSidebarMenuNode.vue'
|
||
|
|
import {
|
||
|
|
clientNavigation,
|
||
|
|
filterNavigationByPermissions,
|
||
|
|
getNavigationParentKeys,
|
||
|
|
} from '@/navigation/clientNavigation'
|
||
|
|
import { useAuthStore } from '@/stores/auth'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
activePath: string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
navigate: [path: string]
|
||
|
|
}>()
|
||
|
|
const auth = useAuthStore()
|
||
|
|
const visibleNavigation = computed(() => filterNavigationByPermissions(clientNavigation, auth.permissionCodes))
|
||
|
|
|
||
|
|
const activeParentKeys = computed(() => new Set(getNavigationParentKeys(visibleNavigation.value, props.activePath)))
|
||
|
|
const openedKeys = ref<ReadonlySet<string>>(new Set(activeParentKeys.value))
|
||
|
|
|
||
|
|
function handleToggle(key: string) {
|
||
|
|
if (activeParentKeys.value.has(key)) return
|
||
|
|
|
||
|
|
const next = new Set(openedKeys.value)
|
||
|
|
if (next.has(key)) next.delete(key)
|
||
|
|
else next.add(key)
|
||
|
|
openedKeys.value = next
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.activePath,
|
||
|
|
() => {
|
||
|
|
openedKeys.value = new Set([...openedKeys.value, ...activeParentKeys.value])
|
||
|
|
},
|
||
|
|
{ flush: 'sync' },
|
||
|
|
)
|
||
|
|
|
||
|
|
function handleSelect(path: string) {
|
||
|
|
emit('navigate', path)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ul class="client-nav-menu">
|
||
|
|
<ClientSidebarMenuNode
|
||
|
|
v-for="node in visibleNavigation"
|
||
|
|
:key="node.key"
|
||
|
|
:node="node"
|
||
|
|
:active-path="activePath"
|
||
|
|
:opened-keys="openedKeys"
|
||
|
|
:active-parent-keys="activeParentKeys"
|
||
|
|
@navigate="handleSelect"
|
||
|
|
@toggle="handleToggle"
|
||
|
|
/>
|
||
|
|
</ul>
|
||
|
|
</template>
|