[docs] Link new MUI X components in sidnav

[oliviertassinari]

A quick win I noticed by chance.

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 93ec704

[danilo-leal]

(A quick note: I personally always found it strange that we link MUI X components just in the Material UI docs and not on the other libraries. That consolidates even more MUI as short for Material UI and, thus, X as Material UI X, at least for now).

[oliviertassinari]

This sounds accurate.

Once they have a Base UI and Joy UI counterpart, we can link to them. Likely we would have a URL parameter to change the demos e.g. https://mui.com/x/react-tree-view/?theme=material-ui.

[oliviertassinari]

I'm merging as it's coherent with what was done before.

---

About the future. This further creates confusion between Material UI and MUI X, though I think that the solution is more for MUI X, parts of the story:

1. ship an unstyled version (meaning low bundle size, and where developers don't have to fight to override existing CSS)
2. more clearly position MUI X as its own thing, e.g. renaming the npm packages, @mui-x/ would already be clearer. Update the layout of the doc to feel clearly a different space. For example, TanStack does a better job at this than we do.
3. Potentially rename MUI X. I'm not sure if we can be successful in breaking the MUI <> Material UI association, in which case MUI X won't help. If the new company name is Abc, then the new MUI X name could be Abc X.

An interesting observation is that Shadcn and the community are not unhappy with relying on an npm package that bundles styles: Sonner. For Shadcn it duplicates with https://ui.shadcn.com/docs/components/toast but they still included it: https://ui.shadcn.com/docs/components/sonner.

I think they did because:

1. There is an unstyled prop https://sonner.emilkowal.ski/styling that you can toggle that removes all the styles. It's not completely unstyled though. Implemented with a data attribute: https://github.com/emilkowalski/sonner/blob/3ac23860babd230c372ca4340c802b13bdeaae4b/src/styles.css#L90. It's the same idea used by Formkit or Mantine, seems like style are not applied on demand: https://formkit.com/essentials/styling.
2. The bundle size still seems small, smaller than the alternatives.
3. Vercel mafia/Twitter trust circle, e.g. https://react-hot-toast.com/ is pretty good as well but got ignored (it's only 5kB gzipped, with goober as a CSS-in-JS dependency, impressive, our toast component is bloated in comparison).
4. Strong design execution.