[docs] Improve product identifier

[danilo-leal]

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

Closes #32591

• On the docs: https://deploy-preview-32707--material-ui.netlify.app/material-ui/getting-started/installation/
• On the website: https://deploy-preview-32707--material-ui.netlify.app/

To-dos on the docs:

• Switch from using Links to Chips.
• Add links to the Chips.
• Product description appears while hovering the Chip.
• Chip of the product in view is selected.

To-dos on the website:

• Add the product identifier to the "Docs" option in the navbar.
• Think about where should "Get started" on the home page redirect to now (it's currently navigating me to Material UI).

Extras:

• Create an icon for the Design Kits.
• Revise the product icons (mostly refine the svgs).
• Fix inconsistent hover color between Product and Docs menu.

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 18bc587

[siriwatknp]

@danilo-leal I have completed the rest of the todos. Feel free to do the final adjustment in MuiProductSelector.js (I moved to this file for reusing it)!

[danilo-leal]

fyi: I've been chewing on the description showing as we hover the chips and I haven't been really feeling it. It forces having that extra (unbalanced and weird) white space for the description text, and ultimately having both of them (MUI Core's description and each sub-product respectively) looks too busy. I'm leaving it commented for now if we feel like going back to this iteration later on, but, for now, my take is to go without it!

Additionally, each chip should direct to the Overview page of each product－we're in the process of writing those for the remaining products (Base is the only one that's currently released). So I might come back and change that in a follow-up pull request once they're done.

[oliviertassinari]

1. I think that we have an issue with the UX of the menu (same in https://mui.com/) when leaving the hover of an area, but moving the mouse over the fading away menu, then it reappears. See https://stripe.com/ and https://www.radix-ui.com/docs/primitives/components/navigation-menu for what I think would be a UX that heaves predictably (and hence feel great). I have noticed it moving between the popup of "Products" to "Docs". It would show the "Products" popup instead of the "Docs" one.

2. For the details description of each product, did we consider updating the main description with a fade on hover, e.g. when hovering "MUI System"?

[danilo-leal]

1. re: Interesting, might need to take a look on that－might be something with the Popper or Menu component?! @siriwatknp could help with more insights on this one specifically.
2. re: Yup! See [docs] Improve product identifier #32707 (comment) －that iteration is still commented so you can have a sense of how it feels locally there for you. I'm leaning towards going without it at this time!

[oliviertassinari]

@danilo-leal

1. We might miss a pointer events none.
2. Ah, I thought that this comment was about displaying the product description below the chips. I think that it would help to record the UX that the difference things you have tried creates as it can improve the feedback other can give.
3. I have removed myself from the GitHub teams, this should not have happened:

[danilo-leal]

1. re: Nice, will add those!
2. re: Oh, just realized your suggestion is slightly different than what I've done! Though I believe it might suffer from the same issue. But I'll prototype these asap so the result is visible 👍 (Confident to move without it at this moment, though.)

[siriwatknp]

I think that we have an issue with the UX of the menu (same in https://mui.com/) when leaving the hover of an area, but moving the mouse over the fading away menu, then it reappears

@danilo-leal I have fixed it.

[siriwatknp]

👍 Great work @danilo-leal !

[mnajdova]

Looks much better 👍 great job @danilo-leal 🥳