[Bug]: on small screens, clicking outside of the side panel should close the side panel

[kgryte]

Currently, when viewing the API docs on a mobile device (small screens), when the side panel is open, the only way to close the panel is by clicking the toggle button.

However, I often found that I wanted to tap outside the panel on, e.g., the package README, expecting the side panel to automatically close in order to return me to the README view. This is not the case, however, as I need to explicitly tap the close button.

I propose, similar to how we query the view port to determine whether the side panel should be open on page load, we use the view port width to determine whether to add a click/touch handler to close the side panel on smaller devices.

[Planeshifter]

Proposal:

On mobile devices, for the drawer component, instead of persistent, we could use temporary
(API docs).

That seems to be the recommended approach: https://mui.com/material-ui/api/drawer/

[Planeshifter]

Second link should have been: https://mui.com/material-ui/react-drawer/#responsive-drawer

[kgryte]

Yeah, we could use a SwipeableDrawer for smaller devices, although I then worry about MUI bloat.

[Planeshifter]

Bloat shouldn't be an issue if we stick with <Drawer />. I would suggest trying to add a mobile check and then conditionally setting the variant to 'persistent' or 'temporary'.

[kgryte]

Agreed. We already do a mobile check, so should be possible to push that down.

[Planeshifter]

Caveat: We may have issues with the sidebar panel closing when opening / collapsing namespaces with the temporary drawer, not sure how it works. But think would be worth a shot to try!

[kgryte]

I believe it works by controlling the open state, so not much different than adding a click handler. The temporary drawer provided by MUI also blurs the background. Not sure that is needed.

[Planeshifter]

Can avoid the blurring via hideBackdrop.