fix: sidebar not working correctly when path starts with slash

It fixes the problems that:

1. When base url and sidebar link url join problem.
2. Sidebat headings without a link is marked as "active".

src/client/theme-default/components/SideBar.ts

@@ -6,7 +6,7 @@ import {
 } from 'vitepress'
 import { computed, h, FunctionalComponent, VNode } from 'vue'
 import { Header } from '../../../../types/shared'
-import { isActive, getPathDirName } from '../utils'
+import { isActive, joinUrl, getPathDirName } from '../utils'
 import { DefaultTheme } from '../config'
 import { useActiveSidebarLinks } from '../composables/activeSidebarLink'
 
@@ -21,7 +21,7 @@ const SideBarItem: FunctionalComponent<{
   const pageData = usePageData()
   const siteData = useSiteData()
 
-  const link = `${siteData.value.base}${relLink || ''}`
+  const link = resolveLink(siteData.value.base, relLink || '')
   const active = isActive(route, link)
   const headers = pageData.value.headers
 
@@ -150,6 +150,10 @@ function resolveMultiSidebar(
   return []
 }
 
+function resolveLink(base: string, path: string): string | undefined {
+  return path ? joinUrl(base, path || '') : undefined
+}
+
 function createLink(active: boolean, text: string, link?: string): VNode {
   const tag = link ? 'a' : 'p'
 

src/client/theme-default/utils.ts

@@ -27,6 +27,21 @@ export function normalize(path: string): string {
   return decodeURI(path).replace(hashRE, '').replace(extRE, '')
 }
 
+export function joinUrl(base: string, path: string): string {
+  const baseEndsWithSlash = base.endsWith('/')
+  const pathStartsWithSlash = path.startsWith('/')
+
+  if (baseEndsWithSlash && pathStartsWithSlash) {
+    return base.slice(0, -1) + path
+  }
+
+  if (!baseEndsWithSlash && !pathStartsWithSlash) {
+    return `${base}/${path}`
+  }
+
+  return base + path
+}
+
 /**
  * get the path without filename (the last segment). for example, if the given
  * path is `/guide/getting-started.html`, this method will return `/guide/`.