[Drawer] Adjustments to the mini variant to improve UI/UX

[devzgabriel]

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

Deploy preview: https://deploy-preview-30205--material-ui.netlify.app/components/drawers/#mini-variant-drawer

[mui-pr-bot]

No bundle size changes

Generated by 🚫 dangerJS against 687772f

[devzgabriel]

Before:

After:

[danilo-leal]

Hey! Thanks for contributing :)

Although I like that on your proposal the drawer icons are now aligned with the hamburger menu icon + the spacing is symmetrical, the changes added a flick whenever opening/closing the drawer, which didn't happen previously (videos attached below). So, if you're willing to try, I guess we could explore finding out an approach to have the alignment+spacing adjusted without introducing the flickering.

drawer-before.mov

drawer-after.mov

[devzgabriel]

@danilo-leal
Thanks for the review!
I updated the PR preventing flickering.

[danilo-leal]

The flickering was solved but the slightly unaligned icons came back 😅

[michaldudak]

I'm afraid this change can break layouts that depend on the current width of the drawer.
Additionally, IMO the components now looks worse when there's a scrollbar present (on Windows):

current:

proposed:

[devzgabriel]

The problem with the scrollbar was solved in the last commit. That's why the slightly misaligned icons came back

But I still find PR viable because the way the button texts are hidden is more elegant at the code level.

[gurkerl83]

Hi, I used the mini-drawer variant with some pain at first :). It needed some adjustments to make it look and behave as you want it to be; for the adjusted mini-drawer to work, your screen size requires >= 'MD.'

I can not provide a link to a demo or video but how it works within an app; maybe this helps.

Link to the demo: https://millipede.me/docs/perspective/strategy
Sources: https://github.com/project-millipede/millipede-docs

Thx!

[siriwatknp]

👋 The migration PR has been merged.

Please follow these steps to make sure that the contents are all updated. (Sorry for the inconvenience)

1. pull latest master from upstream to your branch
2. if your PR has changes on the *.md or demo files, you are likely to encounter conflict because all of them have been moved to the new folder.
   2.1 revert the change on those markdown files you did
   2.2 pull latest master from upstream (you should not see conflict)
   2.3 make the changes again at docs/data/material/*
3. run yarn docs:api
   • you might see the changes in docs/pages/material/api/* if your PR touches some of the components
   • it is okay if there is no changes

If you are struggle with the steps above, feel free to tag @siriwatknp

[siriwatknp]

Closed this PR (I can't update @devzgabriel's branch) and open another one with the fix)