35 lines
2.1 KiB
Vue
35 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Navigation } from '~/types/api';
|
|
|
|
interface Props {
|
|
link: Navigation;
|
|
project?: number;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const hasChildren = computed(() => {
|
|
return props.link && props.link.children && props.link.children.length > 0 || false;
|
|
});
|
|
|
|
const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.path));
|
|
|
|
const emit = defineEmits(['navigate']);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="py-1" v-if="project && !isNaN(project)">
|
|
<Accordion v-if="hasChildren" v-model="collapsed" class="data-[type]:after:content-[attr(data-type)] data-[type]:after:border data-[type]:after:border-light-35 data-[type]:dark:after:border-dark-35
|
|
data-[type]:after:text-sm data-[type]:after:px-1 data-[type]:after:bg-light-20 data-[type]:dark:after:bg-dark-20 data-[type]:after:[font-variant:all-petite-caps]">
|
|
<template #header>{{ link.title }}</template>
|
|
<template #content >
|
|
<NavigationLink @navigate="e => emit('navigate')" class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
|
|
</template>
|
|
</Accordion>
|
|
<NuxtLink v-else @click="e => emit('navigate')" class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75 xl:text-base text-sm flex justify-between items-center
|
|
data-[type]:after:content-[attr(data-type)] data-[type]:after:border data-[type]:after:border-light-35 data-[type]:dark:after:border-dark-35
|
|
data-[type]:after:text-sm data-[type]:after:px-1 data-[type]:after:bg-light-20 data-[type]:dark:after:bg-dark-20 data-[type]:after:[font-variant:all-petite-caps]" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
|
|
active-class="!text-accent-blue relative before:border-l-2 before:border-accent-blue before:absolute before:-top-1 before:-bottom-1 before:-left-4 before:-mx-px" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
|
|
<div>{{ link.title }}</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</template> |