mirror of https://github.com/nuxt/nuxt.git
72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<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>
|