Merge pull request #157 from pengzhanbo/fix-sidebar

perf(theme): navbar menu text too long

theme/src/client/components/VPIcon.vue

@@ -66,7 +66,9 @@ const style = computed(() => ({
 </script>
 
 <template>
-  <img v-if="type === 'link'" class="vp__img" :src="link" alt="" :style="{ height: size }">
+  <span v-if="type === 'link'" class="vp-icon-img">
+    <img :src="link" alt="" :style="{ height: size }">
+  </span>
   <span
     v-else-if="type === 'svg'"
     class="vp-icon"
@@ -82,10 +84,15 @@ const style = computed(() => ({
 </template>
 
 <style scoped>
-.vp__img {
+.vp-icon-img {
   display: inline-block;
+  width: max-content;
   height: 1em;
   margin: 0 0.3em;
   vertical-align: middle;
 }
+
+.vp-icon-img img {
+  height: 100%;
+}
 </style>

theme/src/client/components/VPMenuGroup.vue

@@ -49,4 +49,9 @@ defineProps<{
   color: var(--vp-c-text-2);
   transition: color var(--t-color);
 }
+
+.title :deep(.vp-icon),
+.title :deep(.vp-icon-img) {
+  margin-left: 0;
+}
 </style>

theme/src/client/components/VPMenuLink.vue

@@ -39,7 +39,6 @@ const { page } = useData()
 
 .link {
   display: block;
-  width: max-content;
   padding: 0 12px;
   font-size: 14px;
   font-weight: 500;
@@ -60,4 +59,9 @@ const { page } = useData()
 .link.active {
   color: var(--vp-c-brand-1);
 }
+
+.link :deep(.vp-icon),
+.link :deep(.vp-icon-img) {
+  margin-left: 0;
+}
 </style>

theme/src/client/components/VPSidebarItem.vue

@@ -227,7 +227,7 @@ function onCaretClick() {
   transition: color var(--t-color);
 }
 
-.item :deep(.vp__img) {
+.item :deep(.vp-icon-img) {
   height: 0.9em;
   margin: 0 0.25rem 0 0;
 }

theme/src/client/components/global/VPCard.vue

@@ -50,7 +50,7 @@ const icon = computed<string | { svg: string } | undefined>(() => {
 }
 
 .vp-card-wrapper :deep(.vp-icon),
-.vp-card-wrapper :deep(.vp__img) {
+.vp-card-wrapper :deep(.vp-icon-img) {
   margin: 0;
 }
 

theme/src/client/components/global/VPLinkCard.vue

@@ -76,7 +76,7 @@ defineProps<{
 }
 
 .vp-link-card .link :deep(.vp-icon),
-.vp-link-card .link :deep(.vp__img) {
+.vp-link-card .link :deep(.vp-icon-img) {
   margin: 0;
 }
 

theme/src/client/composables/sidebar.ts

@@ -4,6 +4,7 @@ import {
   isArray,
   isPlainObject,
   isString,
+  removeLeadingSlash,
 } from '@vuepress/helper/client'
 import { useMediaQuery } from '@vueuse/core'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
@@ -99,7 +100,7 @@ export function getSidebar(routePath: string, routeLocal: string): ResolvedSideb
         .sort((a, b) => b.split('/').length - a.split('/').length)
         .find((dir) => {
           // make sure the multi sidebar key starts with slash too
-          return routePath.startsWith(ensureLeadingSlash(dir))
+          return routePath.startsWith(`${routeLocal}${removeLeadingSlash(dir)}`)
         }) || ''
     const sidebar = dir ? _sidebar[dir] : undefined
 

theme/src/node/autoFrontmatter/resolveOptions.ts

@@ -104,7 +104,7 @@ export function resolveOptions(
                       const prefix = notesByLocale(locale)?.link || ''
                       const note = findNote(relativePath)
                       return pathJoin(
-                        locale,
+                        prefix.startsWith(locale) ? '/' : locale,
                         prefix,
                         note?.link || getCurrentDirname(note?.dir, relativePath),
                         '/',

theme/src/node/theme.ts

@@ -78,7 +78,6 @@ export function plumeTheme(options: PlumeThemeOptions = {}): Theme {
           await prepareData(app)
         })
         const { localeOptions } = await waitForConfigLoaded()
-        await waitForAutoFrontmatter()
         await prepareThemeData(app, localeOptions)
         await prepareData(app)
       },