🎨 Improve navbar blur styles

[jd-solanki]

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

Hi 👋🏻

We are now moving towards v1 and with the merge of #2727 I would like to purpose another change which makes VitePress more elegant.

ATM, navbar blur on scroll doesn't blend into the content purticularly when it's dark content like code block

If you notices there's thick line clearly separating the navbar and the content.

Describe the solution you'd like

Making it more smoother. I don't have words for this but I guess you know how it should look.

Describe alternatives you've considered

None

Additional context

none

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.

[kiaking]

Very good point. I do have some thoughts on global header on doc layout. I'm thinking maybe we should draw a gutter line... 🤔

Especially on Tablet view size when we have "On this page" outline button. I wanted make that one better but couldn't come up with good idea, but if we have clear divider at header, it's much easier.

I'll try to create mockup and gather some ideas.

[jd-solanki]

Hey @kiaking

Thanks for the positive response. As we have not released the v1 yet I would like to suggest some change to the layout if you agree.

It will be more natual, better & cleaner if we make the navbar full width like mintlify:

Benefits:

• Make structure & code more simple (no padding hacks for sidebar)
• allow separating docs in more chunks (sub-navbar) like docus (ex: nuxt's docs)
• More cleaner if we adopt the border layout instead of shadow like mintlify (ex: our admin template)

I also did the same on my docs site if you want to check in VitePress: Anu Docs (I just hasn't enabled the blur yet)

What's your thoughts on this?

[elringus]

It's pretty easy to customize (here is a sample: #2442 (comment)), but would nice to have something like that out of the box. Blur filter for this kind of stuff getting more popular lately.

[jd-solanki]

🤦🏻‍♂️ This GH bots