feat: allow external links in sidebar (#205) (#686)

close #205 Co-authored-by: Kia Ishii <kia.king.08@gmail.com>
vuejs · Jun 6, 2022 · ce17f50 · ce17f50
1 parent 86690fa
commit ce17f50
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git 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
@@ -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
@@ -93,7 +93,7 @@ export namespace DefaultTheme {
   }
 
   export interface SidebarGroup {
-    text: string
+    text?: string
     items: SidebarItem[]
 
     /**