From 8c164feb5784bce4b8af9b0b2c4a4d91cb125f19 Mon Sep 17 00:00:00 2001
From: LittleSound <464388324@qq.com>
Date: Sun, 18 Sep 2022 18:37:31 +0800
Subject: [PATCH 1/7] feat: add support for collapsible multi-level sidebar
 feat: #1360

---
 docs/.vitepress/config.ts                     |  17 ++-
 .../components/VPSidebarLink.vue              | 103 +++++++++++++++---
 types/default-theme.d.ts                      |  20 +++-
 3 files changed, 119 insertions(+), 21 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index a24c1be1f109..4e88021ab230 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -78,8 +78,21 @@ function sidebarGuide() {
       items: [
         { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
         { text: 'Getting Started', link: '/guide/getting-started' },
-        { text: 'Configuration', link: '/guide/configuration' },
-        { text: 'Deploying', link: '/guide/deploying' }
+        { text: 'Configuration', link: '/guide/configuration', items: [
+          { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Configuration', link: '/guide/configuration' },
+          { text: 'Deploying', link: '/guide/deploying', },
+        ] },
+        { text: 'Deploying', link: '/guide/deploying',
+          collapsible: true,
+          collapsed: true,
+          items: [
+          { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Configuration', link: '/guide/configuration' },
+          { text: 'Deploying', link: '/guide/deploying', },
+        ] },
       ]
     },
     {
diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index 330790eb99c9..fab887ccb539 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
-import { computed, inject } from 'vue'
+import { computed, inject, ref, watchEffect } from 'vue'
 import { useData } from 'vitepress'
 import { isActive } from '../support/utils.js'
 import VPLink from './VPLink.vue'
+import VPIconPlusSquare from './icons/VPIconPlusSquare.vue'
+import VPIconMinusSquare from './icons/VPIconMinusSquare.vue'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{ item: DefaultTheme.SidebarItem; depth?: number }>(),
   { depth: 1 }
 )
@@ -15,25 +17,51 @@ const maxDepth = computed<number>(
   () => frontmatter.value.sidebarDepth || Infinity
 )
 const closeSideBar = inject('close-sidebar') as () => void
+
+const collapsible = computed(() => 'items' in props.item ? !!props.item.collapsible : false)
+const collapsed = ref(false)
+
+
+watchEffect(() => {
+  if ('items' in props.item)
+    collapsed.value = !!(collapsible.value && props.item.collapsed)
+})
+
+function toggle() {
+  if (collapsible.value) {
+    collapsed.value = !collapsed.value
+  }
+}
 </script>
 
 <template>
-  <VPLink
-    class="link"
-    :class="{ active: isActive(page.relativePath, item.link) }"
-    :style="{ paddingLeft: 16 * (depth - 1) + 'px' }"
-    :href="item.link"
-    @click="closeSideBar"
-  >
-    <span class="link-text" :class="{ light: depth > 1 }">{{ item.text }}</span>
-  </VPLink>
-  <template
-    v-if="'items' in item && depth < maxDepth"
-    v-for="child in item.items"
-    :key="child.link"
-  >
-    <VPSidebarLink :item="child" :depth="depth + 1" />
-  </template>
+  <section class="VPSidebarLink" :class="{ collapsible, collapsed }">
+    <div class="link-label">
+      <VPLink
+        class="link"
+        :class="{ active: isActive(page.relativePath, item.link) }"
+        :style="{ paddingLeft: 16 * (depth - 1) + 'px' }"
+        :href="item.link"
+        @click="closeSideBar"
+      >
+        <span class="link-text" :class="{ light: depth > 1 }">{{ item.text }}</span>
+      </VPLink>
+
+      <button class="action" @click.stop="toggle" type="button">
+        <VPIconMinusSquare class="icon minus" />
+        <VPIconPlusSquare class="icon plus" />
+      </button>
+    </div>
+    <div class="items">
+      <template
+        v-if="'items' in item && depth < maxDepth"
+        v-for="child in item.items"
+        :key="child.link"
+      >
+        <VPSidebarLink :item="child" :depth="depth + 1" />
+      </template>
+    </div>
+  </section>
 </template>
 
 <style scoped>
@@ -68,4 +96,43 @@ const closeSideBar = inject('close-sidebar') as () => void
   font-size: 13px;
   font-weight: 400;
 }
+
+.link-label {
+  display: flex;
+  justify-content: space-between;
+}
+
+.action {
+  display: none;
+  position: relative;
+  margin-right: -8px;
+  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+  color: var(--vp-c-text-3);
+  transition: color 0.25s;
+}
+
+.VPSidebarLink.collapsible > .link-label .action {
+  display: block;
+}
+
+.icon {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.VPSidebarLink.collapsed .items {
+  max-height: 0;
+}
+
+.icon.minus { opacity: 1; }
+.icon.plus  { opacity: 0; }
+
+.VPSidebarLink.collapsed > .link-label .icon.minus { opacity: 0; }
+.VPSidebarLink.collapsed > .link-label .icon.plus  { opacity: 1; }
 </style>
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 36ba6f0d68f4..e5dc5981d3c7 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -148,7 +148,25 @@ export namespace DefaultTheme {
 
   export type SidebarItem =
     | { text: string; link: string }
-    | { text: string; link?: string; items: SidebarItem[] }
+    | {
+      text: string;
+      link?: string;
+      items: SidebarItem[];
+
+      /**
+       * If `true`, toggle button is shown.
+       *
+       * @default false
+       */
+      collapsible?: boolean
+
+      /**
+       * If `true`, collapsible group is collapsed by default.
+       *
+       * @default false
+       */
+      collapsed?: boolean
+    }
 
   // edit link -----------------------------------------------------------------
 

From 14255848d2dd8ad6973c2ffc11e351172f16eafc Mon Sep 17 00:00:00 2001
From: LittleSound <464388324@qq.com>
Date: Sun, 18 Sep 2022 20:10:59 +0800
Subject: [PATCH 2/7] chore: remove the config.ts modification

---
 docs/.vitepress/config.ts | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 4e88021ab230..a24c1be1f109 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -78,21 +78,8 @@ function sidebarGuide() {
       items: [
         { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
         { text: 'Getting Started', link: '/guide/getting-started' },
-        { text: 'Configuration', link: '/guide/configuration', items: [
-          { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
-          { text: 'Getting Started', link: '/guide/getting-started' },
-          { text: 'Configuration', link: '/guide/configuration' },
-          { text: 'Deploying', link: '/guide/deploying', },
-        ] },
-        { text: 'Deploying', link: '/guide/deploying',
-          collapsible: true,
-          collapsed: true,
-          items: [
-          { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
-          { text: 'Getting Started', link: '/guide/getting-started' },
-          { text: 'Configuration', link: '/guide/configuration' },
-          { text: 'Deploying', link: '/guide/deploying', },
-        ] },
+        { text: 'Configuration', link: '/guide/configuration' },
+        { text: 'Deploying', link: '/guide/deploying' }
       ]
     },
     {

From 4386900cd45fd70dc05c6408f13f7c827244cb76 Mon Sep 17 00:00:00 2001
From: LittleSound <464388324@qq.com>
Date: Sun, 18 Sep 2022 22:23:30 +0800
Subject: [PATCH 3/7] feat: adapt to more situations and improve ease of use

---
 .../components/VPSidebarLink.vue              | 50 ++++++++++++++++---
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index fab887ccb539..5ce7b74156ac 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -21,6 +21,12 @@ const closeSideBar = inject('close-sidebar') as () => void
 const collapsible = computed(() => 'items' in props.item ? !!props.item.collapsible : false)
 const collapsed = ref(false)
 
+/**
+ * When this node is both a page and a parent node,
+ * a split line will be added between the collapse button and the link to distinguish the functional area.
+ */
+const divider = computed(() => !!props.item.link && collapsible.value)
+
 
 watchEffect(() => {
   if ('items' in props.item)
@@ -32,6 +38,15 @@ function toggle() {
     collapsed.value = !collapsed.value
   }
 }
+
+function clickLink() {
+  closeSideBar()
+
+  // If there are no links to jump to, switch to expand when clicking on the text
+  if (!props.item.link) {
+    toggle()
+  }
+}
 </script>
 
 <template>
@@ -39,10 +54,10 @@ function toggle() {
     <div class="link-label">
       <VPLink
         class="link"
-        :class="{ active: isActive(page.relativePath, item.link) }"
+        :class="{ active: isActive(page.relativePath, item.link), divider }"
         :style="{ paddingLeft: 16 * (depth - 1) + 'px' }"
         :href="item.link"
-        @click="closeSideBar"
+        @click="clickLink"
       >
         <span class="link-text" :class="{ light: depth > 1 }">{{ item.text }}</span>
       </VPLink>
@@ -66,6 +81,7 @@ function toggle() {
 
 <style scoped>
 .link {
+  flex: 1;
   display: block;
   margin: 4px 0;
   color: var(--vp-c-text-2);
@@ -99,7 +115,15 @@ function toggle() {
 
 .link-label {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+}
+
+.link.divider {
+  border-right: 1px solid var(--vp-c-divider-light);
+}
+
+.link:not(.divider):hover + .action {
+  color: var(--vp-c-text-2);
 }
 
 .action {
@@ -113,10 +137,18 @@ function toggle() {
   transition: color 0.25s;
 }
 
+.action:hover {
+  color: var(--vp-c-text-2);
+}
+
 .VPSidebarLink.collapsible > .link-label .action {
   display: block;
 }
 
+.VPSidebarLink.collapsible > .link-label .link {
+  cursor: pointer;
+}
+
 .icon {
   position: absolute;
   top: 8px;
@@ -126,13 +158,17 @@ function toggle() {
   fill: currentColor;
 }
 
-.VPSidebarLink.collapsed .items {
-  max-height: 0;
-}
-
 .icon.minus { opacity: 1; }
 .icon.plus  { opacity: 0; }
 
 .VPSidebarLink.collapsed > .link-label .icon.minus { opacity: 0; }
 .VPSidebarLink.collapsed > .link-label .icon.plus  { opacity: 1; }
+
+.items {
+  overflow: hidden;
+}
+
+.VPSidebarLink.collapsed .items {
+  max-height: 0;
+}
 </style>

From 8607fe1cb0a91813d701c0d00312855f4d20c942 Mon Sep 17 00:00:00 2001
From: LittleSound <464388324@qq.com>
Date: Thu, 22 Sep 2022 22:12:58 +0800
Subject: [PATCH 4/7] fix: lint error

---
 docs/.vitepress/config.ts | 39 +++++++++++++++++++++++++++++++++++++--
 types/default-theme.d.ts  | 36 ++++++++++++++++++------------------
 2 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index a24c1be1f109..1bfaea06308b 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -78,8 +78,43 @@ function sidebarGuide() {
       items: [
         { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
         { text: 'Getting Started', link: '/guide/getting-started' },
-        { text: 'Configuration', link: '/guide/configuration' },
-        { text: 'Deploying', link: '/guide/deploying' }
+        {
+          text: 'Configuration',
+          link: '/guide/configuration',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
+            { text: 'Getting Started', link: '/guide/getting-started' },
+            { text: 'Configuration', link: '/guide/configuration' },
+            { text: 'Deploying', link: '/guide/deploying' }
+          ]
+        },
+        {
+          text: 'Deploying',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
+            { text: 'Getting Started', link: '/guide/getting-started' },
+            { text: 'Configuration', link: '/guide/configuration' },
+            {
+              text: 'Deploying',
+              link: '/guide/deploying',
+              collapsible: true,
+              collapsed: true,
+              items: [
+                {
+                  text: 'What is VitePress?',
+                  link: '/guide/what-is-vitepress'
+                },
+                { text: 'Getting Started', link: '/guide/getting-started' },
+                { text: 'Configuration', link: '/guide/configuration' },
+                { text: 'Deploying', link: '/guide/deploying' }
+              ]
+            }
+          ]
+        }
       ]
     },
     {
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index e5dc5981d3c7..7338ca034d86 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -149,24 +149,24 @@ export namespace DefaultTheme {
   export type SidebarItem =
     | { text: string; link: string }
     | {
-      text: string;
-      link?: string;
-      items: SidebarItem[];
-
-      /**
-       * If `true`, toggle button is shown.
-       *
-       * @default false
-       */
-      collapsible?: boolean
-
-      /**
-       * If `true`, collapsible group is collapsed by default.
-       *
-       * @default false
-       */
-      collapsed?: boolean
-    }
+        text: string
+        link?: string
+        items: SidebarItem[]
+
+        /**
+         * If `true`, toggle button is shown.
+         *
+         * @default false
+         */
+        collapsible?: boolean
+
+        /**
+         * If `true`, collapsible group is collapsed by default.
+         *
+         * @default false
+         */
+        collapsed?: boolean
+      }
 
   // edit link -----------------------------------------------------------------
 

From d45f2ca816ef03b928ea7865364deb8c651f6f04 Mon Sep 17 00:00:00 2001
From: LittleSound <464388324@qq.com>
Date: Thu, 22 Sep 2022 22:19:59 +0800
Subject: [PATCH 5/7] chore: remove the config.ts modification 2

---
 docs/.vitepress/config.ts | 39 ++-------------------------------------
 1 file changed, 2 insertions(+), 37 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 1bfaea06308b..a24c1be1f109 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -78,43 +78,8 @@ function sidebarGuide() {
       items: [
         { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
         { text: 'Getting Started', link: '/guide/getting-started' },
-        {
-          text: 'Configuration',
-          link: '/guide/configuration',
-          collapsible: true,
-          collapsed: true,
-          items: [
-            { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
-            { text: 'Getting Started', link: '/guide/getting-started' },
-            { text: 'Configuration', link: '/guide/configuration' },
-            { text: 'Deploying', link: '/guide/deploying' }
-          ]
-        },
-        {
-          text: 'Deploying',
-          collapsible: true,
-          collapsed: true,
-          items: [
-            { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
-            { text: 'Getting Started', link: '/guide/getting-started' },
-            { text: 'Configuration', link: '/guide/configuration' },
-            {
-              text: 'Deploying',
-              link: '/guide/deploying',
-              collapsible: true,
-              collapsed: true,
-              items: [
-                {
-                  text: 'What is VitePress?',
-                  link: '/guide/what-is-vitepress'
-                },
-                { text: 'Getting Started', link: '/guide/getting-started' },
-                { text: 'Configuration', link: '/guide/configuration' },
-                { text: 'Deploying', link: '/guide/deploying' }
-              ]
-            }
-          ]
-        }
+        { text: 'Configuration', link: '/guide/configuration' },
+        { text: 'Deploying', link: '/guide/deploying' }
       ]
     },
     {

From 5cbd0d9c96306da168087f66df6eb3fcfedad0a2 Mon Sep 17 00:00:00 2001
From: LittleSound <464388324@qq.com>
Date: Sun, 2 Oct 2022 20:34:16 +0800
Subject: [PATCH 6/7] fix: sidebar will be closed when switching drawer state
 on mobile

---
 src/client/theme-default/components/VPSidebarLink.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index 5ce7b74156ac..93cc00789bdd 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -40,12 +40,11 @@ function toggle() {
 }
 
 function clickLink() {
-  closeSideBar()
-
   // If there are no links to jump to, switch to expand when clicking on the text
-  if (!props.item.link) {
+  if (!props.item.link)
     toggle()
-  }
+  else
+    closeSideBar()
 }
 </script>
 

From c39fdff0ce0e9793a41e27b5dda0afe279d58e7b Mon Sep 17 00:00:00 2001
From: LittleSound <464388324@qq.com>
Date: Sat, 29 Oct 2022 17:40:03 +0800
Subject: [PATCH 7/7] feat: Automatically unfold active routes

---
 .../components/VPSidebarGroup.vue              | 11 +----------
 .../theme-default/components/VPSidebarLink.vue | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarGroup.vue b/src/client/theme-default/components/VPSidebarGroup.vue
index 701453733f05..1c44569d7286 100644
--- a/src/client/theme-default/components/VPSidebarGroup.vue
+++ b/src/client/theme-default/components/VPSidebarGroup.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
 import { ref, watchEffect } from 'vue'
-import { useData } from 'vitepress'
-import { isActive } from '../support/utils.js'
 import VPIconPlusSquare from './icons/VPIconPlusSquare.vue'
 import VPIconMinusSquare from './icons/VPIconMinusSquare.vue'
 import VPSidebarLink from './VPSidebarLink.vue'
@@ -19,13 +17,6 @@ watchEffect(() => {
   collapsed.value = !!(props.collapsible && props.collapsed)
 })
 
-const { page } = useData()
-watchEffect(() => {
-  if(props.items.some((item) => { return isActive(page.value.relativePath, item.link) })){
-    collapsed.value = false
-  }
-})
-
 function toggle() {
   if (props.collapsible) {
     collapsed.value = !collapsed.value
@@ -50,7 +41,7 @@ function toggle() {
 
     <div class="items">
       <template v-for="item in items" :key="item.link">
-        <VPSidebarLink :item="item" />
+        <VPSidebarLink :item="item"  @active-route="collapsed = false" />
       </template>
     </div>
   </section>
diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index 3ced225da9c0..ff6f8dc6a4fc 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
-import { computed, inject, ref, watchEffect } from 'vue'
+import { computed, inject, ref, watch, watchEffect } from 'vue'
 import { useData } from 'vitepress'
 import { isActive } from '../support/utils.js'
 import VPLink from './VPLink.vue'
@@ -11,6 +11,9 @@ const props = withDefaults(
   defineProps<{ item: DefaultTheme.SidebarItem; depth?: number }>(),
   { depth: 1 }
 )
+const emits = defineEmits<{
+  (event: 'active-route'): void
+}>()
 
 const { page, frontmatter } = useData()
 const maxDepth = computed<number>(
@@ -33,6 +36,17 @@ watchEffect(() => {
     collapsed.value = !!(collapsible.value && props.item.collapsed)
 })
 
+function routeActiveBubbling() {
+  collapsed.value = false
+  emits('active-route')
+}
+
+watch(() => isActive(page.value.relativePath, props.item.link), active => {
+  if (active) {
+    routeActiveBubbling()
+  }
+}, { immediate: true })
+
 function toggle() {
   if (collapsible.value) {
     collapsed.value = !collapsed.value
@@ -72,7 +86,7 @@ function clickLink() {
         v-for="child in item.items"
         :key="child.link"
       >
-        <VPSidebarLink :item="child" :depth="depth + 1" />
+        <VPSidebarLink :item="child" :depth="depth + 1" @active-route="routeActiveBubbling" />
       </template>
     </div>
   </section>