mirror of https://github.com/nuxt/nuxt.git
102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<template>
|
|
<nav
|
|
class="
|
|
flex flex-col
|
|
justify-start
|
|
max-w-sm
|
|
overflow-y-auto
|
|
text-sm
|
|
font-medium
|
|
lg:h-[reset]
|
|
h-(full-header)
|
|
d-scrollbar
|
|
py-4
|
|
px-4
|
|
sm:px-6
|
|
lg:pr-0 lg:pt-8
|
|
"
|
|
>
|
|
<!-- Title -->
|
|
<h5 v-if="['xs', 'sm', 'md'].includes($mq) && title" class="m-0 py-2 font-medium text-base uppercase">
|
|
{{ title }}
|
|
</h5>
|
|
|
|
<!-- Links list -->
|
|
<ul>
|
|
<template v-for="link in links">
|
|
<AsideNavigationItem
|
|
v-if="link.nested !== false && link.children.length"
|
|
:key="link.to"
|
|
:title="link.title"
|
|
:docs="link.children"
|
|
:collapse="link.collapse"
|
|
@update:collapse="link.collapse = $event"
|
|
/>
|
|
<AsideNavigationItem v-else :key="link.to" :docs="[link]" />
|
|
</template>
|
|
</ul>
|
|
|
|
<AsideBottom />
|
|
</nav>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, ref, watch, useContext } from '@nuxtjs/composition-api'
|
|
|
|
export default defineComponent({
|
|
setup () {
|
|
const { $docus } = useContext()
|
|
|
|
// Replicate currentNav locally
|
|
const links = ref($docus.currentNav.value.links)
|
|
|
|
// Category title
|
|
const title = ref($docus.currentNav.value.title)
|
|
|
|
// Category slug
|
|
const slug = ref($docus.currentNav.value.slug)
|
|
|
|
// Check if current current navigation has directories
|
|
const isDirectory = computed(
|
|
() => links.value.filter(link => link.children && link.children.length > 0).length === 0
|
|
)
|
|
|
|
// Watch updates on currentNav
|
|
watch(
|
|
$docus.currentNav,
|
|
(newVal) => {
|
|
links.value = newVal.links
|
|
title.value = newVal.title
|
|
slug.value = newVal.slug
|
|
},
|
|
{ deep: true }
|
|
)
|
|
|
|
// Uncollapse current category on first navigation
|
|
watch(
|
|
links,
|
|
(newVal) => {
|
|
newVal.forEach((link) => {
|
|
if (link.children && link.children.length > 0) {
|
|
const isCategoryActive = link.children.some(document => $docus.isLinkActive(document.to))
|
|
|
|
if (isCategoryActive) {
|
|
link.collapse = false
|
|
}
|
|
}
|
|
})
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
// Get parent
|
|
const parent = computed(() => $docus.currentNav.value.parent)
|
|
|
|
// Get last release value
|
|
const lastRelease = computed(() => $docus.lastRelease?.value)
|
|
|
|
return { isDirectory, links, title, slug, parent, lastRelease }
|
|
}
|
|
})
|
|
</script>
|