🐛 [Bug report]: Mobile nav drawer does not close when tapping outside on reactplay.io #1659
Description
Contributor Guidelines
- I have read the guidelines and discussion
Descrcibe the bug?
When I open the mobile navigation drawer on https://reactplay.io and then tap anywhere on the main content outside the drawer, the drawer does not close.
It only closes via its own controls (e.g. the close button), which makes navigation less smooth on mobile.
Steps to reproduce the bug?
Steps to reproduce the behavior:
- Open https://reactplay.io on a mobile device.
- Tap the menu (hamburger) icon to open the right-side navigation drawer.
- Tap anywhere on the main content area outside the drawer.
The drawer stays open instead of closing.
Expected behavior
When the navigation drawer is open and the user taps anywhere outside the drawer area, the drawer should close. This is the common behavior for mobile navigation drawers and modals.
Desktop (Please provide your system information)
Device: Pixel 7 Pro
OS : Android 16
Browser: Chrome(Latest)
Mobile (Please provide your device information)
Device: Pixel 7 Pro
OS : Android 16
Browser: Chrome(Latest)
Screenshot / Screenshare
Relevant log output
It appears there is no full-screen backdrop behind the drawer that captures taps outside the drawer. Adding such a backdrop and closing the drawer when it is tapped might resolve the issue.
Record
- I have checked the existing issues
- I have read the Contributing Guidelines
- I want to work on this issue
- I am a Hacktoberfest contributor
Code of Conduct
- I agree to follow this project's Code of Conduct