[Drawer] Mini variant with SwipableDrawer

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

https://mui.com/material-ui/

MIT License

93.96k stars 32.27k forks source link

[Drawer] Mini variant with SwipableDrawer #19606

Open tomas-c opened 4 years ago

tomas-c commented 4 years ago

There's an example in the docs on how to make a small drawer with only icons shown that can be expanded to its full width.

Super useful on small screens. Unfortunately, this doesn't seem possible to implement with SwipableDrawer.

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

If there was a way to keep the content of the swipable drawer in the dom when it's closed, then a similar example to that in the docs could be used.

Motivation 🔦

Mini drawers are useful on small screens. Small screens usually have touch capabilities so people naturally want to open/close drawers by swiping.

TommyJackson85 commented 4 years ago

I'm gonna try and add a swipable function from the swipabledrawer api to a Mini Variant Drawer sandbox. Might be better to keep it as a separate component on the Drawer page. Maybe call it: Swipeable Mini variant drawer.

TommyJackson85 commented 4 years ago

Somebody take a look at this sandbox: https://codesandbox.io/s/ts3f6

I am able to open and close it from clicking it, but I am not able to swipe it close on mobile. Is there anything I am missing in the Sandbox or is there anything that is overriding it like props? I used the mini variant drawer as a base template and just added some of the props from the swipeable api documentation, while also using its demo for comparison.

From what I think, the fact we are styling it to close slightly might be the problem. This issue https://github.com/mui-org/material-ui/issues/13361 Which has been fixed, and highlights the potential use of SwipeAreaProps. Could SwipeAreaProps be used to instead of the styling to make it slightly open when closed?

Just doing this first to know my limitations, before creating a PR.

TommyJackson85 commented 4 years ago

I noticed from the console of the the SwipeableDrawer sandbox example, the Mui-drawer modal dissapears when closed: @oliviertassinari can you tell me if this is true and if there is a way to keep it open when closed to allow for styling to make it a mini variant version as closed?

Closed:

Open:

ulfimlg commented 4 years ago

Is there any update on this issue? I am looking for the same solution.