Improve Sidebar Closing Mechanism on Mobile

erichfi commented 1 month ago

User Story:

As a mobile user, I want to easily close the sidebar, So that I can navigate without frustration or accidental logout.

Acceptance Criteria

GIVEN the user is on a mobile device with the sidebar open, WHEN the user taps on the area outside the sidebar, THEN the sidebar should close.

GIVEN the user is on a mobile device with the sidebar open, WHEN the user taps a new close button under the "Verify" section, THEN the sidebar should close.

Product & Design Links:

Tech Details:

Implement tap detection on the area outside the sidebar to trigger sidebar close.
Add a close button under the "Verify" section within the sidebar.
Ensure the X button for closing the sidebar remains for users who prefer tapping it.

Open Questions:

[ ] Should there be any animation or visual cue when the sidebar is closing via a tap outside the sidebar or the new button?
[ ] Are there specific UI/UX guidelines we need to consider for the placement and design of the new close button?
[ ] How should this feature interact with other sidebar functionalities within the app?

Notes/Assumptions:

Assume that maintaining default swipe functionality (back in history) is crucial and should not be overridden.
This change should not affect desktop or tablet versions of the app.
The X button for closing the sidebar will remain for users who prefer tapping to close.

octanaiv commented 1 month ago

Because you can click outside the sidebar and you have the close button, the close (X) icon should not be sticky / follow you as you scroll. close-stamp-details And a figma link https://www.figma.com/design/FOOlLEFaBt87atw6CPkA5P/Passport-App?node-id=11995-9957&t=0CwgI6oGe0GMPfvS-1

lucianHymer commented 1 week ago

@erichfi Does this ticket include the onchain sidebar? Or should I address that in https://github.com/passportxyz/passport/issues/2762

lucianHymer commented 1 week ago

Might want to move the CancelButton I wrote here to it's own file and reference it for this sidebar too (for the "X" button at the top) https://github.com/passportxyz/passport/blob/191f3c526dfb31fa190884a5c469a196c3e033b4/app/components/OnchainSidebar.tsx#L22

passportxyz / passport