Skip to content

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

Open
@kgryte

Description

@kgryte
Member

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

Planeshifter commented on May 21, 2022

@Planeshifter
Member

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

Planeshifter commented on May 21, 2022

@Planeshifter
Member
kgryte

kgryte commented on May 21, 2022

@kgryte
MemberAuthor

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

Planeshifter

Planeshifter commented on May 21, 2022

@Planeshifter
Member

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

kgryte commented on May 21, 2022

@kgryte
MemberAuthor

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

Planeshifter

Planeshifter commented on May 21, 2022

@Planeshifter
Member

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

kgryte commented on May 21, 2022

@kgryte
MemberAuthor

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

Planeshifter commented on May 21, 2022

@Planeshifter
Member

Can avoid the blurring via hideBackdrop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @Planeshifter@kgryte

      Issue actions

        [Bug]: on small screens, clicking outside of the side panel should close the side panel · Issue #50 · stdlib-js/www