diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 08c154fb..92f4f521 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -4,9 +4,8 @@ import { inBrowser } from 'vitepress'
import { ref, watch } from 'vue'
import { useLayout } from '../composables/layout'
import VPSidebarGroup from './VPSidebarGroup.vue'
-import { isClientOnly } from '../../shared'
-const { sidebarGroups, hasSidebar } = useLayout()
+const { sidebarGroups, hasSidebar, isSidebarClientOnly } = useLayout()
const props = defineProps<{
open: boolean
@@ -48,7 +47,7 @@ watch(
-
+
diff --git a/src/client/theme-default/composables/layout.ts b/src/client/theme-default/composables/layout.ts
index 85fb306b..6cad62a7 100644
--- a/src/client/theme-default/composables/layout.ts
+++ b/src/client/theme-default/composables/layout.ts
@@ -6,6 +6,7 @@ import { getSidebar, getSidebarGroups } from '../support/sidebar'
import { useData } from './data'
import { getHeaders } from './outline'
import { useCloseSidebarOnEscape } from './sidebar'
+import { isClientOnly } from '../../shared'
const headers = shallowRef([])
@@ -33,6 +34,10 @@ export function useLayout() {
const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
+ const isSidebarClientOnly = computed(
+ () => isClientOnly(theme.value.sidebar) || isClientOnly(sidebar.value)
+ )
+
const sidebarGroups = computed(() => {
return hasSidebar.value ? getSidebarGroups(sidebar.value) : []
})
@@ -60,6 +65,7 @@ export function useLayout() {
sidebarGroups,
hasSidebar,
isSidebarEnabled,
+ isSidebarClientOnly,
hasAside,
leftAside,
headers,
diff --git a/src/client/theme-default/support/sidebar.ts b/src/client/theme-default/support/sidebar.ts
index 201f2536..e2afc591 100644
--- a/src/client/theme-default/support/sidebar.ts
+++ b/src/client/theme-default/support/sidebar.ts
@@ -1,5 +1,5 @@
import type { DefaultTheme } from 'vitepress/theme'
-import { isActive } from '../../shared'
+import { isActive, propagateClientOnly } from '../../shared'
import { ensureStartingSlash } from './utils'
export interface SidebarLink {
@@ -108,12 +108,13 @@ export function hasActiveLink(
: false
}
-function addBase(items: SidebarItem[], _base?: string): SidebarItem[] {
- return [...items].map((_item) => {
+function addBase(items: SidebarItem[], _base?: string) {
+ const result = [...items].map((_item) => {
const item = { ..._item }
const base = item.base || _base
if (base && item.link) item.link = base + item.link
if (item.items) item.items = addBase(item.items, base)
- return item
+ return propagateClientOnly(item, _item)
})
+ return propagateClientOnly(items, result)
}
diff --git a/src/shared/shared.ts b/src/shared/shared.ts
index a8635af1..d777f039 100644
--- a/src/shared/shared.ts
+++ b/src/shared/shared.ts
@@ -231,13 +231,20 @@ export function escapeHtml(str: string): string {
.replace(/&(?![\w#]+;)/g, '&')
}
-const CLIENT_ONLY = '[VP_CLIENT_ONLY]'
+const ClientOnlyMarker = Symbol.for('vitepress:client-only')
-export function clientOnly(obj: T): T {
- ;(obj as any)[CLIENT_ONLY] = true
- return obj
+export function clientOnly(object: T) {
+ ;(object as any)[ClientOnlyMarker] = true
+ return object
}
-export function isClientOnly(obj: T) {
- return Boolean((obj as any)?.[CLIENT_ONLY])
+export function isClientOnly(object?: T): boolean {
+ return (object as any)?.[ClientOnlyMarker] ?? false
+}
+
+export function propagateClientOnly(src: T, dst: T): T {
+ if (isClientOnly(src)) {
+ clientOnly(dst)
+ }
+ return dst
}