feat: sidebar supported multi level

src/client/theme-default/components/VPSidebarLink.vue

@@ -5,22 +5,40 @@ import { useData } from 'vitepress'
 import { isActive } from '../support/utils'
 import VPLink from './VPLink.vue'
 
-defineProps<{
+withDefaults(defineProps<{
   item: DefaultTheme.SidebarItem
-}>()
+  depth?: number
+}>(), {
+  depth: 1
+})
 
-const { page } = useData()
+const { page, frontmatter } = useData()
+
+const maxDepth: number = frontmatter.value.sidebarDepth || Infinity
 
 const closeSideBar = inject('close-sidebar') as () => void
 </script>
 
 <template>
-  <VPLink
+  <VPLink 
     :class="{ active: isActive(page.relativePath, item.link) }"
     :href="item.link"
     @click="closeSideBar"
-  >
-    <span class="link-text">{{ item.text }}</span>
+    >
+    <span 
+      class="link-text"
+      :class="{'link-text-light': depth > 1}">
+      {{ item.text }}
+    </span>
+
+    <template v-if="depth < maxDepth">
+        <VPSidebarLink 
+          v-for="child in item.items"
+          :key="child.link"
+          :item="child"
+          :depth="depth + 1"
+        />
+    </template>
   </VPLink>
 </template>
 
@@ -32,6 +50,10 @@ const closeSideBar = inject('close-sidebar') as () => void
   transition: color 0.5s;
 }
 
+.link>.link {
+  padding: 4px 0 4px 20px;
+}
+
 .link:hover {
   color: var(--vp-c-text-1);
 }
@@ -51,4 +73,9 @@ const closeSideBar = inject('close-sidebar') as () => void
   font-size: 14px;
   font-weight: 500;
 }
+
+.link-text-light {
+  font-size: 13px;
+  font-weight: 400;
+}
 </style>

types/default-theme.d.ts

@@ -137,6 +137,7 @@ export namespace DefaultTheme {
   export interface SidebarItem {
     text: string
     link: string
+    items?: SidebarItem[]
   }
 
   // edit link -----------------------------------------------------------------