fix: revert back to old collapse logic (#539)

* ⏪ (collapse) revert back to old collapse logic * 🐛 (navigation) preserve uncollapsing for first visited category
nuxt-themes · Jul 8, 2021 · f1915e4 · f1915e4
1 parent 9b67c34
commit f1915e4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git 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)"
               />
               <AsideNavigationItem v-else :key="link.to" :docs="[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
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { computed, defineComponent, ref, useContext } from '@nuxtjs/composition-api'
+import { computed, watch, defineComponent, ref, useContext } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   props: {