fix(common): close mobile nav drawer when tapping outside overlay#1663
Conversation
Add onClick handler on the navbar-collapse wrapper to close the mobile navigation drawer when users tap on the dark overlay area outside the drawer panel. Stop event propagation on header-links to prevent clicks inside the drawer from closing it. Add smooth slide and fade transition animation for the drawer panel (translateX) and overlay (opacity) so the drawer does not just abruptly appear/disappear. Replace display:none/block toggle with visibility and pointer-events approach to enable CSS transitions. Fixes reactplay#1659
✅ Deploy Preview for reactplayio ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey! contributor, thank you for opening a Pull Request 🎉.
@reactplay/maintainers will review your submission soon and give you helpful feedback.
If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.
There was a problem hiding this comment.
Pull request overview
Fixes the mobile navigation drawer UX by allowing users to close the drawer when tapping outside the panel, and adds open/close animations via CSS transitions.
Changes:
- Add overlay click handling to close the mobile nav drawer, while stopping event propagation for clicks inside the drawer panel.
- Replace
display: none/blockwithvisibility+pointer-eventsto enable smooth slide/fade transitions on mobile. - Restructure mobile drawer/overlay styles and add transition effects.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/common/header/HeaderNav.jsx | Adds click handling to close the drawer when tapping outside and prevents inside clicks from closing it. |
| src/common/header/header.css | Implements mobile overlay + slide/fade transitions and updates mobile drawer layout rules. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
screen-capture.webm |
2 participants
Description
Fixes #1659
The mobile nav drawer did not close when tapping outside the drawer panel on mobile devices.
Changes
onClickhandler on thenavbar-collapseoverlay to close the drawer when tapping outsidee.stopPropagation()onheader-linksto prevent clicks inside the drawer from closing ittranslateX) and fade (opacity) CSS transitions for open/close animationdisplay: none/blockwithvisibility+pointer-eventsto enable CSS transitionscursor: pointeron overlay for better UX affordanceFiles Changed
src/common/header/HeaderNav.jsx- Added click handlers for overlay close behaviorsrc/common/header/header.css- Added transition animations, restructured mobile nav stylesTesting
Before
After