From 2193750b1b5ec5ec1a9a1fece80838d9ccd75734 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Fri, 22 Jul 2022 19:38:04 +0530
Subject: [PATCH] fix: make link optional if nested and irregular padding

---
 .../components/VPSidebarLink.vue              | 36 +++++++------------
 types/default-theme.d.ts                      |  8 ++---
 2 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index 41fafbb06822..77f7eb594220 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -1,43 +1,31 @@
 <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>
@@ -45,7 +33,7 @@ const closeSideBar = inject('close-sidebar') as () => void
 <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
index 69a085bb78af..6bdcd6c0096a 100644
--- 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 -----------------------------------------------------------------