feat(navigation): upgrade mobile navigation menu into accessible Radix UI slide drawer - #820
Closed
utkarshsingh3011 wants to merge 4 commits into
Closed
Conversation
…x UI slide drawer
Contributor
Welcome to OSSfolio, @utkarshsingh3011! 🎉Thank you for opening this pull request and contributing to the open-source community! 🚀 To ensure a smooth review process, please make sure you have:
We will review your PR as soon as possible. Happy coding! 💻✨ |
github-actions
Bot
added
frontend
Contributor
|
Important Review skippedToo many files! This PR contains 274 files, which is 174 over the limit of 100. To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (274)
You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthrough
ChangesNavbar navigation
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Navbar
participant RadixDialog
User->>Navbar: Open mobile menu
Navbar->>RadixDialog: Open drawer
RadixDialog-->>User: Show navigation and controls
User->>Navbar: Select an action
Navbar->>RadixDialog: Close drawer
Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/layout/Navbar.tsx`:
- Around line 638-639: Update the drawer “Get started” button styling in Navbar
to stop using the hardcoded brand palette values via tokens.primary and
tokens.ink, and switch that inline style to the CSS variable design tokens
instead. Keep the existing button styling logic intact, but replace the color
sources in the Navbar component with the corresponding var(--color-primary) and
var(--color-on-primary) symbols so the design-token migration is fully applied.
- Around line 566-580: Update the drawer portfolio Link in Navbar to reuse the
existing profileHref value instead of interpolating username directly, so the
mobile and desktop navigation paths stay consistent and the link never resolves
to /undefined when user_metadata.user_name is missing. Keep the onClick close
behavior and the existing myPortfolio label unchanged.
- Around line 652-660: Keep LanguageSwitcher out of the scrollable
Dialog.Content area in Navbar so its dropdown is not clipped by overflowY:
'auto'. Update the layout around the LanguageSwitcher block to place it above
the scroll boundary or otherwise render its menu upward within the drawer, and
remove the marginTop: 'auto' placement that keeps it pinned to the bottom of the
scrollable content.
- Around line 581-586: Update the mobile logout button’s onClick handler to
await the async handleLogout call and remove its redundant setMobileOpen(false)
invocation, relying on handleLogout’s existing state update. Add error handling
inside handleLogout so sign-out failures are handled appropriately rather than
becoming unhandled promise rejections.
- Around line 486-504: Update the Dialog.Content element in the Navbar dialog to
explicitly set aria-describedby={undefined} because no Dialog.Description is
provided. Keep the existing dialog styling and structure unchanged.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 6fe72a19-598f-41bd-8666-966416251d1c
📒 Files selected for processing (1)
src/components/layout/Navbar.tsx
github-actions
Bot
added
documentation
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
2 participants
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.
Summary
Refactors the mobile navigation menu in
Navbar.tsxfrom a basic absolute DOM overlay into an accessible, touch-friendly slide drawer powered by Radix UI Dialog primitives.Related Issue
Closes #569
Type of Change
Changes Made
@radix-ui/react-dialog(Root,Portal,Overlay,Content,Title,Close).Escapekey dismissal.backdrop-filter: blur(4px)matching modern dark-mode aesthetics.Summary by CodeRabbit
New Features
Style