Nuxt/docs/components/app/AsideNavigation.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>