59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed, nextTick, ref, watch } from 'vue'
|
|
import { useRouter, type NavigationFailure } from 'vue-router'
|
|
import type { MenuInstance } from 'element-plus'
|
|
import type { AdminNavigationNode } from '@/core/navigation/adminNavigation'
|
|
import AdminSidebarMenuNode from './AdminSidebarMenuNode.vue'
|
|
|
|
const props = defineProps<{
|
|
items: AdminNavigationNode[]
|
|
activePath: string
|
|
collapsed: boolean
|
|
}>()
|
|
const router = useRouter()
|
|
const menuRef = ref<MenuInstance>()
|
|
|
|
function getGroupKeys(nodes: AdminNavigationNode[]): string[] {
|
|
return nodes.flatMap((node) => node.children?.length
|
|
? [node.key, ...getGroupKeys(node.children)]
|
|
: [])
|
|
}
|
|
|
|
const groupKeys = computed(() => getGroupKeys(props.items))
|
|
const defaultOpeneds: string[] = []
|
|
const menuInstanceKey = computed(() => `${props.collapsed ? 'collapsed' : 'expanded'}:${groupKeys.value.join('|')}`)
|
|
|
|
async function restoreActivePath() {
|
|
await nextTick()
|
|
menuRef.value?.updateActiveIndex(props.activePath)
|
|
}
|
|
|
|
async function navigate(path: string) {
|
|
if (!path.startsWith('/') || path === props.activePath) return
|
|
let failure: NavigationFailure | void
|
|
try {
|
|
failure = await router.push(path)
|
|
} catch {
|
|
await restoreActivePath()
|
|
return
|
|
}
|
|
if (failure) await restoreActivePath()
|
|
}
|
|
|
|
watch(() => props.activePath, restoreActivePath)
|
|
</script>
|
|
|
|
<template>
|
|
<el-menu
|
|
ref="menuRef"
|
|
:key="menuInstanceKey"
|
|
class="side-nav-menu"
|
|
:default-active="activePath"
|
|
:collapse="collapsed"
|
|
:default-openeds="defaultOpeneds"
|
|
@select="navigate"
|
|
>
|
|
<AdminSidebarMenuNode v-for="item in items" :key="item.key" :node="item" :level="0" />
|
|
</el-menu>
|
|
</template>
|