[docs-infra] Remove border from the side nav

[danilo-leal]

• I have followed (at least) the PR section of the contributing guide.

This PR removes the border-right from the documentation side nav. I've been flirting with this idea for a while, feeling like the docs are "heavy" somehow, and doing so helps a lot in alleviating this sentiment.

• Before: https://mui.com/material-ui/getting-started/installation/
• After: https://deploy-preview-40326--material-ui.netlify.app/material-ui/getting-started/installation/

[mui-bot]

Netlify deploy preview

https://deploy-preview-40326--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 9ba12f3

[oliviertassinari]

Bold move, but comparing the experiences to https://www.notion.so/mui-org/Docs-infra-83ba469842104927bb13606b1e859ef4?pvs=4#7647eb75870c42a79dc5bdd85cc412e2, it makes sense.

Side note: for Windows and macOS users like me who always have their scrollbar visible, the difference is very hard to notice.

[alexfauquette]

A divider or not a divider that is the question 💀🎭

Do you also want to remove the divider of the toolbar?

I might admit I've no opinion on this kind of choice

[danilo-leal]

@mui/design — curious if y'all have any thoughts! 😃 I'm still feeling it...

[zanivan]

Leaving my 2 cents:

Though it look cleaner and lighter without the border (something I really like), it feels that the content is not properly centered due the uneven whitespaces:

---

Looking to some benchmarks, they solved this with diferent approaches:

Shadcn glued the TOC to the content instead of fixing it to the right.

Radix uses Gestault principles to solve this missperception by making the selected item and search field with full width in the left section

[danilo-leal]

The docs main container in our case is centered, though — what made it feel like it isn't, from the first screenshot, is that you don't have any selected item (particularly as we don't maintain the parent-level accordion header link selected), and thus your first red block there is starting from the edge of the longest label rather than the container's width edge.

I'm honestly torn with this change. Not sure which one feels better (current vs. this). And there are various cases of great feeling docs with both approaches, so it's definitely not something concretely objective. 🤔

[zanivan]

The docs main container in our case is centered, though — what made it feel like it isn't, from the first screenshot, is that you don't have any selected item (particularly as we don't maintain the parent-level accordion header link selected), and thus your first red block there is starting from the edge of the longest label rather than the container's width edge.

Yep, definitely! That was what I was trying to show. When nothing is selected, it feels misaligned—something that Radix solved with the search field and the selected item.

I'm honestly torn with this change. Not sure which one feels better (current vs. this). And there are various cases of great feeling docs with both approaches, so it's definitely not something concretely objective. 🤔

I think we can iterate a bit more, some users seem to like it this way, and tbh I think this feels lighter than the current version, what imo is something we need in the docs.

[danilo-leal]

I'll close this one for now as I'm still not entirely sure 😃 We can return it soon — don't want to leave it lingering here.