From d1a2c76f33ab55ad8d43357b57c9ae3de55e9d0c Mon Sep 17 00:00:00 2001
From: YiZhi <yizhi0911@gmail.com>
Date: Sat, 23 Jul 2022 22:26:15 +0800
Subject: [PATCH] feat(theme): support multi-level sidebar (#851)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 .../components/VPSidebarLink.vue              | 33 ++++++++++++++-----
 src/client/theme-default/support/sidebar.ts   | 12 +++++--
 types/default-theme.d.ts                      |  7 ++--
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index 80958603c59..77f7eb59422 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -1,37 +1,47 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 import { useData } from 'vitepress'
 import { isActive } from '../support/utils'
 import VPLink from './VPLink.vue'
 
-defineProps<{
-  item: DefaultTheme.SidebarItem
-}>()
-
-const { page } = useData()
+withDefaults(defineProps<{ item: DefaultTheme.SidebarItem; depth?: number }>(), { depth: 1 })
 
+const { page, frontmatter } = useData()
+const maxDepth = computed<number>(() => frontmatter.value.sidebarDepth || Infinity)
 const closeSideBar = inject('close-sidebar') as () => void
 </script>
 
 <template>
   <VPLink
-    :class="{ active: isActive(page.relativePath, item.link) }"
+    class="link"
+    :class="{ active: isActive(page.relativePath, item.link), offset: depth > 1 }"
     :href="item.link"
     @click="closeSideBar"
   >
-    <span class="link-text">{{ item.text }}</span>
+    <span class="link-text" :class="{ light: depth > 1 }">{{ item.text }}</span>
+    <template
+      v-if="'items' in item && depth < maxDepth"
+      v-for="child in item.items"
+      :key="child.link"
+    >
+      <VPSidebarLink :item="child" :depth="depth + 1" />
+    </template>
   </VPLink>
 </template>
 
 <style scoped>
 .link {
   display: block;
-  padding: 4px 0;
+  margin: 4px 0;
   color: var(--vp-c-text-2);
   transition: color 0.5s;
 }
 
+.link.offset {
+  padding-left: 16px;
+}
+
 .link:hover {
   color: var(--vp-c-text-1);
 }
@@ -51,4 +61,9 @@ const closeSideBar = inject('close-sidebar') as () => void
   font-size: 14px;
   font-weight: 500;
 }
+
+.link-text.light {
+  font-size: 13px;
+  font-weight: 400;
+}
 </style>
diff --git a/src/client/theme-default/support/sidebar.ts b/src/client/theme-default/support/sidebar.ts
index a22cef54c87..6ce6ee0a3e8 100644
--- a/src/client/theme-default/support/sidebar.ts
+++ b/src/client/theme-default/support/sidebar.ts
@@ -32,11 +32,17 @@ export function getFlatSideBarLinks(
 ): DefaultTheme.SidebarItem[] {
   const links: DefaultTheme.SidebarItem[] = []
 
-  for (const group of sidebar) {
-    for (const link of group.items) {
-      links.push(link)
+  function recursivelyExtractLinks(items: DefaultTheme.SidebarItem[]) {
+    for (const item of items) {
+      item.link && links.push(item)
+      if ('items' in item) {
+        recursivelyExtractLinks(item.items)
+      }
     }
   }
 
+  for (const group of sidebar) {
+    recursivelyExtractLinks(group.items)
+  }
   return links
 }
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 2f1148b82bc..6bdcd6c0096 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -139,10 +139,9 @@ export namespace DefaultTheme {
     collapsed?: boolean
   }
 
-  export interface SidebarItem {
-    text: string
-    link: string
-  }
+  export type SidebarItem =
+    | { text: string; link: string }
+    | { text: string; link?: string; items: SidebarItem[] }
 
   // edit link -----------------------------------------------------------------