[docs] Improve the left side-nav #22780
Conversation
There was a problem hiding this comment.
Using our components should be preferred for dog-feeding purposes. If you profile for performance you should always use the production build not development. It is apparent from your screenshot that you used the development build. This is why we have #15282
I quickly did a run with https://deploy-preview-22780--material-ui.netlify.app/ vs https://next--material-ui.netlify.app/ and meassured 90ms (pr) vs 120ms (next) when opening with 6x CPU throttling.
The performance gain is negligent compared to the usefulness of dog-feeding.
@eps1lon Yeah, it seems that the performance gain of reducing the usage of components decreases significantly between dev and production. I'm happy to learn that! Thanks for testing it :). I was lazy (didn't want to wait for a build on my local env but rather use Netlify). Agree, I don't think that its a game-changer, only a nice free win.
What is there to dog feed? From what I understand, we were using the |
oliviertassinari
force-pushed
the
docs-improve-drawer
branch
from
84bd1e3
to
cd8a28e
Compare
oliviertassinari
force-pushed
the
docs-improve-drawer
branch
from
96812f8
to
999af0c
Compare
|
Not keen on the lack of a hover indicator on the top level items; and with no focus indicator, keyboard navigation is impossible. |
|
@mbrookes Updated |
It was an opportunity to work on 3 problems at the same time:
1. Fix w3 validator
The warning was present on all the pages and was buried all the other issues (x81)
https://validator.w3.org/nu/?doc=https%3A%2F%2Fnext.material-ui.com%2Fcomponents%2Fslider-styled
There are still 3 issues related to navigation (edit page, previous page, and next page) but that's for another day.
2. Update the design
It's closer to the Material Design specification https://material.io/components/navigation-drawer. I also wanted the design to better support more levels of nesting and more items.
Before
After
I have used the following as inspiration too:
3. Improve the rendering performance
I was getting frustrated at the time it takes to open the drawer on mobile and the time it takes to click on TOCs hash link. In the following benchmark in development, opening the drawer is about x2 faster. The main change is to use fewer React components.
Before
After
e
The performance for changing the hash is also improved but less significantly as the rendering time of the main body of the page stays the same. In dev:
Before
After
