feat(theme): support multi-level sidebar (#851)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

Author: yizhi996

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>

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
 }

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 -----------------------------------------------------------------