|
|
@ -6,10 +6,11 @@ export interface NavItem { |
|
|
children?: NavItem[] |
|
|
children?: NavItem[] |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
defineProps<{ |
|
|
const props = defineProps<{ |
|
|
nav: NavItem[] |
|
|
nav: NavItem[] |
|
|
}>() |
|
|
}>() |
|
|
|
|
|
|
|
|
|
|
|
const route = useRoute() |
|
|
const expandedMenus = ref<Set<string>>(new Set()) |
|
|
const expandedMenus = ref<Set<string>>(new Set()) |
|
|
|
|
|
|
|
|
const toggleMenu = (label: string) => { |
|
|
const toggleMenu = (label: string) => { |
|
|
@ -21,6 +22,27 @@ const toggleMenu = (label: string) => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const isExpanded = (label: string) => expandedMenus.value.has(label) |
|
|
const isExpanded = (label: string) => expandedMenus.value.has(label) |
|
|
|
|
|
|
|
|
|
|
|
const hasMatchingChild = (item: NavItem): boolean => { |
|
|
|
|
|
if (!item.children) return false |
|
|
|
|
|
return item.children.some(child => child.to === route.path || hasMatchingChild(child)) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const expandMatchingParents = () => { |
|
|
|
|
|
for (const item of props.nav) { |
|
|
|
|
|
if (item.children && hasMatchingChild(item)) { |
|
|
|
|
|
expandedMenus.value.add(item.label) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
expandMatchingParents() |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
watch(() => route.path, () => { |
|
|
|
|
|
expandMatchingParents() |
|
|
|
|
|
}) |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
|
|