84 lines
2.1 KiB
Vue
84 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { ChevronDown } from '@lucide/vue'
|
|
import type { ClientNavigationNode } from '@/navigation/clientNavigation'
|
|
|
|
const props = defineProps<{
|
|
node: ClientNavigationNode
|
|
activePath: string
|
|
openedKeys: ReadonlySet<string>
|
|
activeParentKeys: ReadonlySet<string>
|
|
level?: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
navigate: [path: string]
|
|
toggle: [key: string]
|
|
}>()
|
|
|
|
const groupId = computed(() => `client-nav-group-${props.node.key}`)
|
|
</script>
|
|
|
|
<template>
|
|
<li
|
|
class="client-nav-node"
|
|
v-if="node.children"
|
|
:class="{
|
|
'has-divider-before': node.dividerBefore,
|
|
'is-active-parent': activeParentKeys.has(node.key),
|
|
}"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="client-sidebar-group-trigger"
|
|
:aria-expanded="openedKeys.has(node.key)"
|
|
:aria-controls="groupId"
|
|
@click="emit('toggle', node.key)"
|
|
>
|
|
<component
|
|
:is="node.icon"
|
|
class="client-sidebar-node-icon"
|
|
:size="level ? 16 : 20"
|
|
aria-hidden="true"
|
|
/>
|
|
<span>{{ node.title }}</span>
|
|
<ChevronDown class="client-sidebar-group-chevron" :size="16" aria-hidden="true" />
|
|
</button>
|
|
|
|
<ul
|
|
v-show="openedKeys.has(node.key)"
|
|
:id="groupId"
|
|
class="client-nav-submenu"
|
|
>
|
|
<ClientSidebarMenuNode
|
|
v-for="child in node.children"
|
|
:key="child.key"
|
|
:node="child"
|
|
:active-path="activePath"
|
|
:opened-keys="openedKeys"
|
|
:active-parent-keys="activeParentKeys"
|
|
:level="(level ?? 0) + 1"
|
|
@navigate="emit('navigate', $event)"
|
|
@toggle="emit('toggle', $event)"
|
|
/>
|
|
</ul>
|
|
</li>
|
|
|
|
<li v-else class="client-nav-node" :class="{ 'has-divider-before': node.dividerBefore }">
|
|
<RouterLink
|
|
:to="node.path"
|
|
class="client-sidebar-link"
|
|
:aria-current="node.path === activePath ? 'page' : undefined"
|
|
@click="emit('navigate', node.path)"
|
|
>
|
|
<component
|
|
:is="node.icon"
|
|
class="client-sidebar-node-icon"
|
|
:size="level ? 16 : 20"
|
|
aria-hidden="true"
|
|
/>
|
|
<span>{{ node.title }}</span>
|
|
</RouterLink>
|
|
</li>
|
|
</template>
|