0

I am using Mini variant drawer from Material UI and its working fine but in this drawer when I open the nav bar and click anywhere outside the nav bar, it isn't closing. Just like in Temporary drawer. I tried to implement but failed.

Mini variant drawer

https://codesandbox.io/s/6xdsb?file=/index.js

Temporary drawer

https://codesandbox.io/s/ktmju

Any help would be really appriciated.

  • both the components act differently. In the drawer, the overlay supports the click to dismiss it. In case of the mini drawer, either provide a supporting overlay so as to attach an event and when the user clicks there you can fire the hide drawer action. – Dlucidone May 24 '20 at 12:28

1 Answers1

1

The Mini Variant is a Persistent Drawer, and from the Material UI website:

Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user.

So it is not meant to be closed when the user clicks outside of it.

Although I'm not sure why you want to implement this functionality with a persistent drawer but maybe this Material UI util will help you

Material UI Click Away Listener

Roaa
  • 1,212
  • 7
  • 11
  • I need that kind of UI with that option and ya I tried Click Away Listener but its acting weird. –  May 24 '20 at 14:34
  • How is it acting exactly? Can you explain so maybe I can help you? – Roaa May 25 '20 at 14:52