feat(admin-ui): implement bottom navigation bar for the mobile view (#2917)#2918
Merged
Conversation
…2917) Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
mo-auto
added
comp-admin-ui
Contributor
|
Warning Review limit reached
Next review available in: 16 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a mobile-only bottom navigation and sheet for the admin UI, wires it into layout and mobile spacing, adds locale labels and tests, and removes React Query devtools from the app bootstrap. ChangesMobile Bottom Navigation Feature
React Query Devtools Removal
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant MobileBottomNav
participant MobileNavSheet
participant Router
User->>MobileBottomNav: Tap tab
alt directNav tab
MobileBottomNav->>Router: navigate(path)
MobileBottomNav->>MobileBottomNav: close sheet
else non-direct tab
MobileBottomNav->>MobileBottomNav: toggle openSheet(key)
MobileBottomNav->>MobileNavSheet: render with openKey
User->>MobileNavSheet: Tap tile/item
alt tile has children
MobileNavSheet->>MobileNavSheet: drill into tile
else selectable item
MobileNavSheet->>MobileBottomNav: onSelect(item)
MobileBottomNav->>Router: navigate(item.path)
MobileBottomNav->>MobileBottomNav: close sheet
end
end
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 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: 6
🤖 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 `@admin-ui/app/components/MobileBottomNav/MobileBottomNav.tsx`:
- Around line 101-105: The MobileBottomNav <nav> landmark is mislabeled because
its aria-label uses t('menus.home'), which only describes one tab instead of the
whole navigation region. Update the label in MobileBottomNav to a generic
navigation title by reusing an existing translation key or adding a new one
across locales, so screen readers announce the landmark as the full bottom
navigation rather than “Home.”
In `@admin-ui/app/components/MobileBottomNav/MobileNavSheet.style.ts`:
- Around line 19-33: The MobileNavSheet.style.ts sheet spacing only accounts for
BOTTOM_NAV.HEIGHT, so update the sheet style in the MobileNavSheet sheet object
to include the iOS safe-area bottom inset as well. Adjust the paddingBottom in
the sheet style so the bottom content clears both the fixed bottom nav and
env(safe-area-inset-bottom), keeping the existing SHEET/BOTTOM_NAV sizing logic
intact.
In `@admin-ui/app/components/MobileBottomNav/MobileNavSheet.tsx`:
- Line 92: The `MobileNavSheet` lookup is bypassing TypeScript’s exhaustiveness
checks by casting `openKey` to a narrower union when reading from
`SECTION_MENUS`. Replace the cast in `MobileNavSheet` with proper narrowing
based on `SHEET_KEYS` (for example, guard out `SHEET_KEYS.MORE` before indexing)
or change the map to be keyed only by `SectionKey` so `SECTION_MENUS[openKey]`
is type-safe and new `SHEET_KEYS` entries fail at compile time.
- Around line 133-166: The MobileNavSheet dialog is marked with role="dialog"
and aria-modal="true" but never receives initial focus, so it doesn’t behave
like a modal for keyboard/screen reader users. Update MobileNavSheet to move
focus into the sheet when it opens, ideally onto the close button (or the dialog
container), using the existing dialog/header elements and their refs if needed.
Make the focus move happen on open and keep it tied to the sheet’s open state so
the first tabbable focus starts inside the dialog.
In `@admin-ui/app/components/MobileBottomNav/sheetIcons.tsx`:
- Around line 16-28: The icon-key mapping is duplicated between
SHEET_ICON_BY_KEY and the bottom-nav ICON_BY_KEY, which can drift when icons
change. Move the shared entries for home, oauthserver, and usersmanagement into
a single reusable icon map and have both MobileBottomNav.tsx and sheetIcons.tsx
consume it, keeping the existing icon components and keys aligned in one place.
In `@admin-ui/app/styles/miltonbo/scss/_layout.scss`:
- Around line 63-69: The mobile breakpoint and bottom-nav height are duplicated
in the SCSS layout rules and the JS constants, which can drift over time. Update
the layout styles in _layout.scss to consume a shared source of truth from
constants.ts, ideally via CSS custom properties or a shared imported variable
file, and make sure the desktop sidebar hide rule and the bottom padding/offset
rules reference the same MOBILE_MEDIA_QUERY and BOTTOM_NAV.HEIGHT values.
🪄 Autofix (Beta)
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
Run ID: a74ca06d-c942-402b-b16f-2cc0d736f366
📒 Files selected for processing (22)
admin-ui/app/components/MobileBottomNav/MobileBottomNav.style.tsadmin-ui/app/components/MobileBottomNav/MobileBottomNav.tsxadmin-ui/app/components/MobileBottomNav/MobileNavSheet.style.tsadmin-ui/app/components/MobileBottomNav/MobileNavSheet.tsxadmin-ui/app/components/MobileBottomNav/__tests__/MobileBottomNav.test.tsxadmin-ui/app/components/MobileBottomNav/__tests__/MobileNavSheet.test.tsxadmin-ui/app/components/MobileBottomNav/__tests__/sheetConstants.test.tsadmin-ui/app/components/MobileBottomNav/__tests__/sheetIcons.test.tsxadmin-ui/app/components/MobileBottomNav/constants.tsadmin-ui/app/components/MobileBottomNav/sheetConstants.tsadmin-ui/app/components/MobileBottomNav/sheetIcons.tsxadmin-ui/app/components/MobileBottomNav/types.tsadmin-ui/app/constants/ui.tsadmin-ui/app/customColors.tsadmin-ui/app/index.tsxadmin-ui/app/layout/__tests__/default.test.tsxadmin-ui/app/layout/default.tsxadmin-ui/app/locales/en/translation.jsonadmin-ui/app/locales/es/translation.jsonadmin-ui/app/locales/fr/translation.jsonadmin-ui/app/locales/pt/translation.jsonadmin-ui/app/styles/miltonbo/scss/_layout.scss
💤 Files with no reviewable changes (1)
- admin-ui/app/index.tsx
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@admin-ui/app/components/MobileBottomNav/MobileBottomNav.tsx`:
- Line 14: Tighten the typing of PRIMARY_ICON_BY_KEY in sheetIcons so it is
keyed by the same literal union used by PRIMARY_TAB_DEFS instead of
Record<string, JSX.Element>, then update MobileBottomNav to index it through
that stricter key type. This should make missing or renamed iconKey entries fail
at compile time, and you should keep the PRIMARY_TAB_DEFS iconKey type and
PRIMARY_ICON_BY_KEY definition aligned so future tabs cannot silently resolve to
undefined.
🪄 Autofix (Beta)
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
Run ID: 7e8f35ea-c85f-4656-88e1-39ddc88e7963
📒 Files selected for processing (15)
admin-ui/app/components/Layout/LayoutContent.tsxadmin-ui/app/components/MobileBottomNav/MobileBottomNav.tsxadmin-ui/app/components/MobileBottomNav/MobileNavSheet.style.tsadmin-ui/app/components/MobileBottomNav/MobileNavSheet.tsxadmin-ui/app/components/MobileBottomNav/__tests__/MobileNavSheet.test.tsxadmin-ui/app/components/MobileBottomNav/__tests__/sheetIcons.test.tsxadmin-ui/app/components/MobileBottomNav/constants.tsadmin-ui/app/components/MobileBottomNav/sheetConstants.tsadmin-ui/app/components/MobileBottomNav/sheetIcons.tsxadmin-ui/app/constants/ui.tsadmin-ui/app/locales/en/translation.jsonadmin-ui/app/locales/es/translation.jsonadmin-ui/app/locales/fr/translation.jsonadmin-ui/app/locales/pt/translation.jsonadmin-ui/app/styles/miltonbo/scss/_layout.scss
Signed-off-by: faisalsiddique4400 <faisalsiddique10886@gmail.com>
|
duttarnab
approved these changes
Jul 7, 2026
moabu
approved these changes
Jul 7, 2026
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
4 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.
feat(admin-ui): implement bottom navigation bar for the mobile view (#2917)
Summary
This PR introduces a bottom navigation bar for the mobile view of the Admin UI to improve navigation and accessibility on smaller screens.
The new navigation provides quick access to primary application sections while complementing the existing responsive layout. The implementation follows the Admin UI design system and maintains a consistent user experience across mobile devices.
Fix Summary
Verification
passes successfully.
🔗 Ticket
Closes: #2917
Summary by CodeRabbit