Reduce layout shifts caused by LocalNav for devices with width 960px - 1280px

[sapphi-red]

Is your feature request related to a problem? Please describe.

layoutshifts.webm

Layout shifts happens for devices with width 960px - 1280px. This is caused by the LocalNav injected on client side.

Describe the solution you'd like

I'm not sure. I took a look but didn't find an easy way to solve this.

This empty class is set on SSR because

vitepress/src/client/theme-default/components/VPLocalNav.vue

Line 34 in 318c14f

empty: !hasLocalNav.value,

hasLocalNav is always false on SSR.

vitepress/src/client/theme-default/composables/layout.ts

Lines 55 to 57 in 318c14f

	const hasLocalNav = computed(() => {
	return headers.value.length > 0
	})

This is true for most pages on client render because it is set here.

vitepress/src/client/theme-default/composables/layout.ts

Line 93 in 318c14f

headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)

But this function checks the rendered document. I don't know a way to achieve this on SSR.
Maybe adding isSSR || here, assuming most pages has headers?

vitepress/src/client/theme-default/components/VPLocalNav.vue

Line 42 in 318c14f

v-if="!isHome && (hasLocalNav || hasSidebar || y >= navHeight)"

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Adding by default on SSR seems good as most pages without aside/outline: false will have those.

[sapphi-red]

I tried a few things to render the navbar no SSR, but wasn't able to remove the nav bar on hydration at https://vitepress.dev/guide/mpa-mode (as it's doesn't have any headers).