[docs] Update the nav order

[mbrookes]

preview: https://deploy-preview-28323--material-ui.netlify.app/components/buttons/

This PR updates the order of the components in the nav to something slightly more logical:

Components

• Inputs
• Data display
• Feedback
• Surfaces
• Navigation
• Layout
• Utils
• Data grid
• Lab

This roughly flows from the "inside" to the "outside" of a UI, and with the most common / popular components first.

The main exceptions are Data grid, which is a data display component, but isn't in core; and Lab. Utils has always been an odd one out, since they aren't all components... I could also see Surfaces and Navigation being swapped, but no strong preference.

I also think we should remove the padding between list items. The nav is too long already:

This also makes navigation feel snappier not having the dead space between items when moving the pointer.

[mui-pr-bot]

No bundle size changes

Generated by 🚫 dangerJS against 59eff7b

[danilo-leal]

I'm ok with it, it makes sense for me!

[oliviertassinari]

I also think we should remove the padding between list items. The nav is too long already:

Fair enough, but could we "skew" the nav item header to more clearly recognize what's the header of what?

Current

Proposal

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index f2cae9359b..04a419f91e 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -130,7 +130,7 @@ const ItemButton = styled(Item, {
     })(),
     fontSize: depth === 1 ? theme.typography.pxToRem(12) : theme.typography.pxToRem(14.5),
     fontWeight: depth === 1 ? 700 : 500,
-    margin: theme.spacing(0.5, 0),
+    margin: depth === 0 ? theme.spacing(0.5, 0) : '8px 0 4px',
     '&:hover': {
       backgroundColor: depth === 0 ? '' : alpha(theme.palette.primary.main, 0),
       color: (() => {

[oliviertassinari]

As a side note, on

We could consider grey 600 instead of 500 to improve the contrast of the subheader.

[mnajdova]

We could consider grey 600 instead of 500 to improve the contrast of the subheader.

Agree 👍

[mnajdova]

I am mering this in order to include it before the stable release.

[oliviertassinari]

I thought we said we wouldn't use 600? #28327. In #28323 (comment) I mean for the color, not the font-weight 👼 .

I guess it's another example where not using design tokens can cost us.

[danilo-leal]

Oh yeah, great catch. We aren't importing the 600 font-weight, only 400, 500, and 700. 600 ends up rendering the 700.