'#nav-screen-content-after' does not work when screen width between [768,1280)

[fiwalld]

Describe the bug

Hi there,

I want to extend the default theme layout by using '#nav-screen-content-after' slot, but if the screen size is between [768,1280) px, '#nav-screen-content-after' slot does not work. I suppose all nav slots don't work when the window resize to [768,1280) px. Please help fix the issue.

Thanks

Reproduction

1.Add '#nav-screen-content-after' layout slot according to https://vitepress.dev/guide/extending-default-theme#layout-slots. 2.Resize screen to [768,1280) px. 3.Nav layout slot component will disappear.

Expected behavior

Resize screen to [768,1280) px and the added layout slot component should be still exist.

System Info

System:
    OS: macOS 14.3.1
  Binaries:
    Node: 21.7.1 - ~/.nvm/versions/node/v21.7.1/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v21.7.1/bin/npm
    pnpm: 8.15.5 - ~/.nvm/versions/node/v21.7.1/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.107
    Safari: 17.3.1
  npmPackages:
    vitepress: ^1.1.0 => 1.1.0

Additional context

No response

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

nav screen is this area (the mobile nav menu):

why would that slot be shown on larger viewports? (and it's not shown on 1280+ width too) Can you explain what are you trying to do?

[fiwalld]

Add 'test' to '#nav-screen-content-after' slot, it shows under web and mobile width. But it can't show when the width is between [768,1280), please check the snapshots below:

'test' shows

'test' shows

'test' does not show

[brc-dd]

Add 'test' to '#nav-screen-content-after' slot, it shows under web and mobile width.

No it doesn't. It is only shown on mobile when expanded - https://stackblitz.com/edit/vite-tbadgd?file=docs%2F.vitepress%2Ftheme%2FLayout.vue

[fiwalld]

'#nav-bar-content-after' also not work, so the question will be how can I add custom component after the nav content when the windows resize to [768,1280)?

[fiwalld]

No it doesn't. It is only shown on mobile when expanded - https://stackblitz.com/edit/vite-tbadgd?file=docs%2F.vitepress%2Ftheme%2FLayout.vue

Hi, please check below snapshot about '#nav-bar-content-after'. Any updates? Is it a bug or a new feature need to be done? Thanks! https://stackblitz.com/edit/vite-cyzwks?file=docs%2F.vitepress%2Ftheme%2FLayout.vue

[brc-dd]

you can do something like this - https://stackblitz.com/edit/vite-hqc3bc?file=docs%2F.vitepress%2Ftheme%2FLayout.vue,docs%2F.vitepress%2Ftheme%2FFoo.vue ?

[fiwalld]

you can do something like this - https://stackblitz.com/edit/vite-hqc3bc?file=docs%2F.vitepress%2Ftheme%2FLayout.vue,docs%2F.vitepress%2Ftheme%2FFoo.vue ?

Hi, that is not what I want. I think the foo menu should be folded to the bottom of pop up menus as below when the widow is between [768,1280), any suggetions?