[joy-ui][docs] Add UI improvements to the side navigation demo

[cipherlogs]

Several enhancements to the side navigation in this pull request.

https://deploy-preview-41461--material-ui.netlify.app/joy-ui/main-features/color-inversion/#side-navigation

Here’s a concise overview:

1. Fixing IconButton Interactions:

• Resolved issues related to light and dark mode interactions.
• Improved consistency across both color schemes.

2. Avatar Interaction Enhancement:

• When an Avatar contains a picture, all icon button properties are now accessible.
• Before the only remaining visual cue is the cursor pointer, which indicates that the avatar is clickable, now all iconbutton behaviour is inherited.

3. Specific Fixes and Modifications:

• Corrected distortion in the plus icon button.

• Enhanced visual separation between the right and left sidebars, especially noticeable when switching color schemes.

Before

After

• Ensured consistency in the select menu colors.
  Before

After

Other changes are explained withing each commit message.

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 2f4468a

[danilo-leal]

Great PR — thanks for refining this further! My comments are mostly just fine-tuned tweaks. 😃

[cipherlogs]

Thank you, @danilo-leal I’ve applied all the modifications except for '--IconButton-size': '3rem'.

When --IconButton-size is the same as the Avatar size, the avatar hides all of the IconButton interactivity, like "hover, active, click" etc. the only thing that's left is the pointer cursor.

Don't you think that the IconButton should be capable of handling this matter? Should I open an issue for that, because Material UI's item button is capable of wrapping around bigger/same size element while keeping all the button interactivity visible.

if --IconButton-size: "3rem" is removed, we won't have the following:

normal state:

hover state:

active state:

Minor changes

I made a small change to the Plus Icon and the palette icon. They now have the text.tertiary color to blend well with the background. I also removed the aria-label from the plus icon button and wrapped it with a Tooltip. This helps users understand the button’s purpose and automatically adds an aria-label(win-win).

[danilo-leal]

Looking great! Agree with your point there about Joy's Icon Button; an issue would be appreciated, even though we might take a while to get to it :)