fix(dashboard): Add clickable backdrop overlay to mobile sidebar#450
Open
adityai0 wants to merge 5 commits into
Open
fix(dashboard): Add clickable backdrop overlay to mobile sidebar#450adityai0 wants to merge 5 commits into
adityai0 wants to merge 5 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a tappable backdrop overlay behind the dashboard’s mobile sidebar to dim background content and allow dismissing the sidebar by tapping outside it.
Changes:
- Render a fixed
bg-black/50backdrop whensidebarOpenis true. - Close the mobile sidebar when the backdrop is clicked.
- Minor formatting adjustments to some
classNametemplate literals.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
d598e2f to
04309f8
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Author
|
Hi @priyashuu @zaidmstrr, can you review my PR? |
Contributor
Thank you for your contributions! I will review them shortly. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds a clickable, semi-transparent backdrop overlay (
bg-black/50) behind the mobile navigation sidebar in the dashboard header.Why it's needed
Previously, when the sidebar was opened on mobile devices, there was no overlay to dim the background content, and users could not tap outside the sidebar to dismiss it. This forced users to precisely tap the small
Xbutton to close the menu. The new backdrop dims the background and allows users to intuitively close the sidebar by tapping anywhere outside of it, matching standard mobile UX patterns.Changes Made
z-[9998]backdropdivindashboard/src/components/common/Header.tsxthat renders whensidebarOpenis true.onClickhandler of the backdrop tosetSidebarOpen(false).Video
Screen.Recording.2026-04-25.144315.mp4