feat: auto collapse when click on another section (#527)

* init pr

* ✨ (aside) restore collapse state on section toggle

Co-authored-by: Yaël GUILLOUX <[email protected]>

src/defaultTheme/components/molecules/AsideNavigation.vue

@@ -63,6 +63,7 @@
                 :title="link.title"
                 :docs="link.children"
                 :collapse="link.collapse === true"
+                @toggle="toggleLinks(link)"
               />
               <AsideNavigationItem v-else :key="link.to" :docs="[link]" />
             </template>
@@ -75,20 +76,41 @@
 </template>
 
 <script>
-import { defineComponent } from '@nuxtjs/composition-api'
+import { computed, defineComponent, ref, watch, useContext } from '@nuxtjs/composition-api'
 
 export default defineComponent({
-  computed: {
-    links() {
-      const nav = this.$docus.currentNav.value
-      return nav.links
-    },
-    parent() {
-      return this.$docus.currentNav.value.parent
-    },
-    lastRelease() {
-      return this.$docus.lastRelease?.value
+  setup() {
+    const { $docus } = useContext()
+
+    const links = ref($docus.currentNav.value.links)
+
+    watch(
+      $docus.currentNav,
+      newVal => {
+        links.value = newVal.links
+      },
+      { deep: true }
+    )
+
+    function toggleLinks(link) {
+      const newLinks = $docus.currentNav.value.links.map(l => {
+        l = { ...l }
+
+        if (link.slug === l.slug) {
+          l.collapse = !l.collapse
+        }
+
+        return l
+      })
+
+      links.value = newLinks
     }
+
+    const parent = computed(() => $docus.currentNav.value.parent)
+
+    const lastRelease = computed(() => $docus.lastRelease?.value)
+
+    return { toggleLinks, links, parent, lastRelease }
   }
 })
 </script>

src/defaultTheme/components/molecules/AsideNavigationItem.vue

@@ -8,7 +8,7 @@
     >
       {{ title }}
     </h5>
-    <ul v-if="!isCollapsed || isActive" class="mb-2 ml-2">
+    <ul v-if="!collapse || isActive" class="mb-2 ml-2">
       <li v-for="doc of docs" :key="doc.to">
         <NuxtLink
           :to="$contentLocalePath(doc.redirect || doc.to)"
@@ -67,19 +67,15 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props) {
+  setup(props, { emit }) {
     const { $docus } = useContext()
 
-    const isCollapsed = ref(props.collapse)
-
     const isActive = computed(() => props.docs.some(document => $docus.isLinkActive(document.to)))
 
     const toggle = () => {
-      if (isActive.value) {
-        return
-      }
+      if (isActive.value) return
 
-      isCollapsed.value = !isCollapsed.value
+      emit('toggle', true)
     }
 
     const isDocumentNew = document => {
@@ -97,7 +93,6 @@ export default defineComponent({
     return {
       toggle,
       isActive,
-      isCollapsed,
       isDocumentNew
     }
   }