44 lines
1.7 KiB
Vue
44 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
interface NavItem {
|
|
title: string
|
|
_path: string
|
|
_id?: string
|
|
_draft?: boolean
|
|
children?: NavItem[]
|
|
|
|
[key: string]: any
|
|
}
|
|
interface Props {
|
|
link: NavItem;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const hasChildren = computed(() => {
|
|
return props.link && props.link.children && props.link.children.length > 0 || false;
|
|
});
|
|
|
|
const collapsed = ref(!useRoute().path.startsWith(props.link._path));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tree-item">
|
|
<template v-if="hasChildren">
|
|
<div class="tree-item-self" :class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }" data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed">
|
|
<div v-if="hasChildren" class="tree-item-icon collapse-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="svg-icon right-triangle">
|
|
<path d="M3 8L12 17L21 8"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="tree-item-inner">{{ link.title }}</div>
|
|
</div>
|
|
<div v-if="!collapsed" class="tree-item-children">
|
|
<NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l"/>
|
|
</div>
|
|
</template>
|
|
<NuxtLink v-else class="tree-item-self" :to="link._path" :active-class="'mod-active'">
|
|
<div class="tree-item-inner">{{ link.title }}<span v-if="link"></span></div>
|
|
</NuxtLink>
|
|
</div>
|
|
</template> |