From 58538e3a5adba1837e3b145113ccc66208de732b Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 30 May 2022 15:35:34 +0530
Subject: [PATCH 1/2] feat: allow external links in sidebar

---
 .../components/VPSidebarGroup.vue             |  9 ++++++--
 .../components/VPSidebarLink.vue              | 23 ++++++++++++-------
 types/default-theme.d.ts                      |  2 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarGroup.vue b/src/client/theme-default/components/VPSidebarGroup.vue
index 198905857c37..3ac122b3c5c3 100644
--- a/src/client/theme-default/components/VPSidebarGroup.vue
+++ b/src/client/theme-default/components/VPSidebarGroup.vue
@@ -6,7 +6,7 @@ import VPIconMinusSquare from './icons/VPIconMinusSquare.vue'
 import VPSidebarLink from './VPSidebarLink.vue'
 
 const props = defineProps<{
-  text: string
+  text?: string
   items: DefaultTheme.SidebarItem[]
   collapsible?: boolean
   collapsed?: boolean
@@ -23,7 +23,12 @@ function toggle() {
 
 <template>
   <section class="VPSidebarGroup" :class="{ collapsible, collapsed }">
-    <div class="title" :role="collapsible ? 'button' : undefined" @click="toggle">
+    <div
+      v-if="text"
+      class="title"
+      :role="collapsible ? 'button' : undefined"
+      @click="toggle"
+    >
       <h2 class="title-text">{{ text }}</h2>
       <div class="action">
         <VPIconMinusSquare class="icon minus" />
diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index 419376552a40..d7830004042e 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -3,6 +3,7 @@ import { inject } from 'vue'
 import { useData } from 'vitepress'
 import { DefaultTheme } from '../config'
 import { isActive, normalizeLink } from '../support/utils'
+import VPLink from './VPLink.vue'
 
 defineProps<{
   item: DefaultTheme.SidebarItem
@@ -14,28 +15,36 @@ const closeSideBar = inject('close-sidebar') as () => void
 </script>
 
 <template>
-  <a
-    class="link"
+  <VPLink
     :class="{ active: isActive(page.relativePath, item.link) }"
     :href="normalizeLink(item.link)"
     @click="closeSideBar"
   >
-    <p class="link-text">{{ item.text }}</p>
-  </a>
+    <span class="link-text">{{ item.text }}</span>
+  </VPLink>
 </template>
 
 <style scoped>
+:deep(.icon) {
+  margin-top: -2px;
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
 .link {
   display: block;
   padding: 6px 0;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
 }
 
-.link:hover .link-text {
+.link:hover {
   color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
 
-.link.active .link-text {
+.link.active {
   color: var(--vp-c-brand);
   transition: color 0.25s;
 }
@@ -44,7 +53,5 @@ const closeSideBar = inject('close-sidebar') as () => void
   line-height: 20px;
   font-size: 14px;
   font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
 }
 </style>
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 2a3dbedc87d4..3d345f46048c 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -86,7 +86,7 @@ export namespace DefaultTheme {
   }
 
   export interface SidebarGroup {
-    text: string
+    text?: string
     items: SidebarItem[]
 
     /**

From e2b2f0b8e8ff7f8b9afd41a46953efddeb4112d9 Mon Sep 17 00:00:00 2001
From: Kia Ishii <kia.king.08@gmail.com>
Date: Mon, 6 Jun 2022 13:04:01 +0900
Subject: [PATCH 2/2] refactor: adjust icon size just a bit

---
 .../theme-default/components/VPSidebarLink.vue    | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarLink.vue b/src/client/theme-default/components/VPSidebarLink.vue
index d7830004042e..f25e63122b0b 100644
--- a/src/client/theme-default/components/VPSidebarLink.vue
+++ b/src/client/theme-default/components/VPSidebarLink.vue
@@ -25,13 +25,6 @@ const closeSideBar = inject('close-sidebar') as () => void
 </template>
 
 <style scoped>
-:deep(.icon) {
-  margin-top: -2px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
-}
-
 .link {
   display: block;
   padding: 6px 0;
@@ -41,12 +34,16 @@ const closeSideBar = inject('close-sidebar') as () => void
 
 .link:hover {
   color: var(--vp-c-text-1);
-  transition: color 0.25s;
 }
 
 .link.active {
   color: var(--vp-c-brand);
-  transition: color 0.25s;
+}
+
+.link :deep(.icon) {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
 }
 
 .link-text {