Nuxt/docs/components/app/AsideHeaderNavigation.vue

72 lines
1.6 KiB
Vue
Raw Normal View History

<template>
<nav ref="nav" class="flex flex-col gap-1 py-4 px-4 sm:px-6">
<NuxtLink v-for="(link, index) in links" :key="index" :to="link.to" class="font-medium my-1 py-1" :class="{ 'text-primary' : isActive(link) }">
{{ link.title }}
</NuxtLink>
</nav>
</template>
<script>
import { defineComponent, useContext, useRoute, ref, watch, computed } from '@nuxtjs/composition-api'
export default defineComponent({
props: {
links: {
type: Array,
default: () => []
}
},
setup (props) {
const { $menu } = useContext()
const route = useRoute()
const currentSlug = computed(() => {
return route.value.path !== '/' && route.value.params?.pathMatch
? route.value.params.pathMatch.split('/')[0]
: null
})
const nav = ref(null)
const openedLink = ref(null)
function selectActiveLink () {
if (currentSlug.value) {
for (const [index, link] of props.links.entries()) {
if (link.slug === currentSlug.value || link.items?.some(item => item.slug === currentSlug.value)) {
openedLink.value = index
break
}
}
} else {
openedLink.value = null
}
}
selectActiveLink()
watch($menu.visible, (value) => {
if (value) {
selectActiveLink()
}
})
function toggle (index) {
if (openedLink.value === index) {
openedLink.value = null
} else {
openedLink.value = index
}
}
function isActive (link) {
return `/${currentSlug.value}` === link.to
}
return {
openedLink,
toggle,
nav,
isActive
}
}
})
</script>