[material-ui][docs] Add improvements to Dashboard template

[zanivan]

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

Closes https://github.com/mui/material-ui/issues/42610 Preview: https://deploy-preview-42445--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/

Objective

👉 This is a further PR to add small tweaks and fixes to the Dashboard template after #41757.

---

Tasks

Adding some tweaks to the template based on Olivier's feedback https://github.com/mui/material-ui/issues/42610

• [x] 1. Fix scrollbar origin

• [ ] 2. Fix the dark mode toggle to persist between loads (will be addressed in a future PR)

https://github.com/mui/material-ui/assets/3165635/7c6f4a03-36ab-4e59-8a47-f606589c2a22

• [x] ~3. Fix keyboard focus style on the tabs~ Fixed since we removed tabs

• [x] 4. Polish out the table design (still missing some tweaks on the menu, and spacing)

https://github.com/mui/material-ui/pull/41757#issuecomment-2143550531

• [x] 5. Add side navigation menu (add mobile version)

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against e4b9a20aedd4f5ae2ab77a10c048744280b8b702

[zanivan]

@noraleonte I noticed that the TreeView has a custom class for focus, and I couldn't disable it on click. I believe the focus-visible styles are showing up here because this class acts in place of the native classes, right? What is the difference/benefit of this custom class versus the native one? 🤔

[zanivan]

Hey @noraleonte, thanks for the feedback! I'm still adding many changes, but I'll definitely need some help code-wise. Can you help me with these?

1. Making menus consistent:

All these menus should look similar regarding states and padding. The 'Development' select is IMO the best, so if others could be like that would be amazing!

2. Some of Olivier's feedbacks:

1. Fix scrollbar origin
2. Fix the dark mode toggle to persist between loads
3. Fix keyboard focus style on the tabs
4. Make the data grid keyboard focus scroll the page

3. Performance and best practices

This should be the reference of best practices regarding customising Material UI and X, so it's important to review everything and reassure that:

• Users can learn how to customize components from this;
• Users can easily copy chunks of code, regardless the theme is selected;
• No third-party code from docs or other sources that the users won't know of;
• Be accessible and score as high as possible on Lighthouse score;

I tried to cover all of these, but someone with a better code knowledge would likely spot some loose ends 👍

[noraleonte]

@zanivan I refactored the theme file a bit for readability, and I also tweaked the menu styles to be more consistent.

[danilo-leal]

Great work, y'all—looking awesome! Here's some high-level stuff I found:

1. [x] ~Hover state of the main select is a bit weird; it seems like it's using the default Material Design color. I'd tweak it and remove the box shadows on hover, too.~
2. [x] ~I'd also reduce the size of the icon within the select~
3. [x] ~Also in the date picker, is there a way to reduce the gap between the two chevron icon buttons?~
4. [x] ~Also in the date picker, the text color on dark mode is too dark/saturated — lighter greys there to improve it~
5. [x] ~On dark mode, I'd probably make the border a bit less saturated; it feels like they have too much of a blue tint.~
6. [x] ~I'd place the "Copyright" thing on the right column on the desktop view, after the pie chart card~
7. [x] ~I feel like using a slightly smaller icon size for the sidebar would make it more polished—something like 18x18 or 16x16~
8. [x] Can we remove the focus styles when we click on tree items? Doesn't feel needed for a click interaction. (@zanivan +1 on this)
9. [x] There's an extremely subtle background color on the date picker's icon button to toggle between month view and year view. I'd remove that! (@zanivan +1 on this)
10. [x] On mobile, the drawer's background color is a bit weird. There's also a bigger space between the second and third section compared to the first and second section.

[zanivan]

@danilo-leal Thanks for the feedback! I've taken the liberty to edit your comment to keep track of the improvements.

@noraleonte would you mind giving me a hand with the missing items from Danilo's feedback and this one? I think after these, we can mark this PR as ready for review 🙌

[noraleonte]

@zanivan Looking into those today 👍

[noraleonte]

@zanivan I think we tackled everything 🍰 But please double check in case I missed something 🙈