diff --git a/src/defaultTheme/components/molecules/AsideNavigation.vue b/src/defaultTheme/components/molecules/AsideNavigation.vue index 33f68f9d5..995da6bb3 100644 --- a/src/defaultTheme/components/molecules/AsideNavigation.vue +++ b/src/defaultTheme/components/molecules/AsideNavigation.vue @@ -63,7 +63,7 @@ :key="link.to" :title="link.title" :docs="link.children" - :collapse="link.collapse === true" + :collapse="link.collapse" @toggle="toggleLinks(link)" /> @@ -83,8 +83,10 @@ export default defineComponent({ setup() { const { $docus } = useContext() + // Replicate currentNav locally const links = ref($docus.currentNav.value.links) + // Watch updates on currentNav watch( $docus.currentNav, newVal => { @@ -93,22 +95,38 @@ export default defineComponent({ { deep: true } ) - function toggleLinks(link) { - const newLinks = $docus.currentNav.value.links.map(l => { - l = { ...l } + // 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 } + ) - if (link.slug === l.slug) { - l.collapse = !link.collapse + // Toggle a link + const toggleLinks = link => { + links.value = links.value.map(l => { + if (l.slug === link.slug) { + l.collapse = !l.collapse } return l }) - - links.value = newLinks } + // Get parent const parent = computed(() => $docus.currentNav.value.parent) + // Get last release value const lastRelease = computed(() => $docus.lastRelease?.value) return { toggleLinks, links, parent, lastRelease } diff --git a/src/defaultTheme/components/molecules/AsideNavigationItem.vue b/src/defaultTheme/components/molecules/AsideNavigationItem.vue index 85a4671dd..98c73f8d8 100644 --- a/src/defaultTheme/components/molecules/AsideNavigationItem.vue +++ b/src/defaultTheme/components/molecules/AsideNavigationItem.vue @@ -50,7 +50,7 @@