feat: add fixed mobile bottom navigation bar - #868
Merged
Conversation
- Add MobileBottomNav component with four tabs (Marketplace, Portfolio, Watchlist, Notifications), visible only on viewports below 768px via md:hidden - Active tab highlighted per current route with top-edge indicator bar - Notification badge on the Notifications tab reads unreadCount from useNotifications, capped at 99+ - Add RootLayout wrapper using <Outlet> so MobileBottomNav is mounted globally inside the router context without per-page changes - Nest all routes under RootLayout in routes.tsx - Document the hidden md:flex intent on Header nav links to make it explicit that MobileBottomNav covers mobile navigation
|
@Moh-dakai Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Member
|
Fix the CI |
Member
|
The verify check is failing on the mobile bottom nav PR. This is most likely a TypeScript type error or a missing import in the new navigation component. Run npm run build locally to see the compiler errors and npm run lint to catch any ESLint violations, then push the fixes. |
RootLayout was imported but never used, causing an ESLint @typescript-eslint/no-unused-vars error in CI. Restructured the routes array to use RootLayout as the top-level layout route with all existing routes as children, so MobileBottomNav is rendered on every page via the Outlet pattern.
5 tasks
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
3 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
Adds a fixed bottom navigation bar for mobile viewports (< 768px) to improve tap target accessibility and primary navigation on small screens.
Changes
Hidden on md+ viewports via md:hidden. Active tab is highlighted per current route with a top-edge indicator bar and aria-current. Notification badge on the
Notifications tab reads unreadCount from useNotifications, capped at 99+.
avoiding per-page changes.
handles navigation there.
Tested
before these changes)
Acceptance criteria
closes #860