fix: make link optional if nested and irregular padding

vuejs · Jul 22, 2022 · 2193750 · 2193750
1 parent 0a1f0b3
commit 2193750
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 29 deletions.
diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
@@ -1,51 +1,39 @@
 <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'
 
-withDefaults(defineProps<{
-  item: DefaultTheme.SidebarItem
-  depth?: number
-}>(), {
-  depth: 1
-})
+withDefaults(defineProps<{ item: DefaultTheme.SidebarItem; depth?: number }>(), { depth: 1 })
 
 const { page, frontmatter } = useData()
-
-const maxDepth: number = frontmatter.value.sidebarDepth || Infinity
-
+const maxDepth = computed<number>(() => frontmatter.value.sidebarDepth || Infinity)
 const closeSideBar = inject('close-sidebar') as () => void
 </script>
 
 <template>
   <VPLink
+    class="link"
     :class="{ active: isActive(page.relativePath, item.link), offset: depth > 1 }"
     :href="item.link"
     @click="closeSideBar"
+  >
+    <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"
     >
-    <span 
-      class="link-text"
-      :class="{ 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"
-        />
+      <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;
 }

diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
@@ -139,11 +139,9 @@ export namespace DefaultTheme {
     collapsed?: boolean
   }
 
-  export interface SidebarItem {
-    text: string
-    link: string
-    items?: SidebarItem[]
-  }
+  export type SidebarItem =
+    | { text: string; link: string }
+    | { text: string; link?: string; items: SidebarItem[] }
 
   // edit link -----------------------------------------------------------------