Open
Description
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.
Activity
Planeshifter commentedon May 21, 2022
Proposal:
On mobile devices, for the drawer component, instead of
persistent
, we could usetemporary
(API docs).
That seems to be the recommended approach: https://mui.com/material-ui/api/drawer/
Planeshifter commentedon May 21, 2022
Second link should have been: https://mui.com/material-ui/react-drawer/#responsive-drawer
kgryte commentedon May 21, 2022
Yeah, we could use a
SwipeableDrawer
for smaller devices, although I then worry about MUI bloat.Planeshifter commentedon May 21, 2022
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 commentedon May 21, 2022
Agreed. We already do a mobile check, so should be possible to push that down.
Planeshifter commentedon May 21, 2022
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 commentedon May 21, 2022
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 commentedon May 21, 2022
Can avoid the blurring via
hideBackdrop
.