From ce17f5035cbbd1e07373ce0f44913f25269bd80b Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 6 Jun 2022 09:36:51 +0530
Subject: [PATCH] feat: allow external links in sidebar (#205) (#686)

close #205

Co-authored-by: Kia Ishii <kia.king.08@gmail.com>
---
 .../components/VPSidebarGroup.vue             |  9 +++++--
 .../components/VPSidebarLink.vue              | 24 +++++++++++--------
 types/default-theme.d.ts                      |  2 +-
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarGroup.vue b/src/client/theme-default/components/VPSidebarGroup.vue
index 19890585..3ac122b3 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 41937655..f25e6312 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,37 +15,40 @@ 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>
 .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;
+}
+
+.link :deep(.icon) {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
 }
 
 .link-text {
   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 80ecbeff..5ef6169c 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -93,7 +93,7 @@ export namespace DefaultTheme {
   }
 
   export interface SidebarGroup {
-    text: string
+    text?: string
     items: SidebarItem[]
 
     /**