[Drawer] Mini variant with SwipableDrawer

[tomas-c]

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.

• 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]

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]

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 #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]

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]

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