feat(frontend): mobile bottom navigation bar (with org switcher + modal z-index fix)#944
feat(frontend): mobile bottom navigation bar (with org switcher + modal z-index fix)#944sundaram2021 wants to merge 1 commit into
Conversation
…x, add mobile org switcher - Rebuild PR phasehq#771 changes on top of current main (branch was 336 commits behind) - layout.tsx: keep main's 48px navbar (mt-12), add pb-14 md:pb-0, make grid md-responsive - Sidebar.tsx: split desktop (hidden md:flex) and fixed mobile bottom nav - Fix Bugbot medium: mobile nav z-50 -> z-10 so HeadlessUI dialogs (z-10, portaled) render above it - Fix Bugbot high: add compact MobileOrgSwitcher (shown when >1 org), reusing OrgsMenu logic - Preserve aria-label/title a11y fix; add aria-current; add iOS safe-area padding
|
Great! @sundaram2021 Could you please include one or two screenshots? |
|
Demo screenshots for the mobile bottom navigation changes: Mobile bottom nav
Mobile org switcher
Modal layering above bottom nav
Desktop sidebar unchanged
Note: These screenshots were captured by AI on my behalf since I'm not currently at my desk. |
Umm. what is this? |
|
I'm in marriage ceremony, So asked codex to paste the screenshot of the changes that has been done in this PR using remote sessions (I should have taken the screenshot earlier while fixing , my bad will take from next time). Can you once run the changes locally and let me know the if any changes needed or if its good to go !! cc: @nimish-ks |
3 participants
Summary
On narrow screens (<768px) the left
Sidebaris hidden and replaced with a fixedbottom navigation bar — similar to Twitter/X — linking to the same team routes.
The layout grid/dividers become
md:-only so content is full-width on mobile, andthe content area gets mobile-only bottom padding so nothing hides behind the bar.
This continues/rebases #771 by @nimish-ks, resolves its merge conflicts with
main,and closes the two open Cursor Bugbot findings on that PR.
What's included
md:hidden,fixed bottom-0) with all current team routes:Home, Apps, Integrations, Access Control, Audit Logs, Settings — equal-width tap
targets and active-state highlighting.
MobileOrgSwitcherthat reuses the sameorganisations/permissions logic as the desktop
OrgsMenu, shown only when the userbelongs to more than one org, opening upward from the bar. (Fixes Bugbot: "No
organization switching capability on mobile".)
z-10(matching the topNavBar) instead ofz-50, so HeadlessUI dialogs (z-10, portaled to<body>) correctly render aboveit rather than the bar covering the modal/backdrop. (Fixes Bugbot: "Mobile nav
z-index renders above modal dialogs".)
title/aria-labeland gainsaria-current="page"when active.pb-[env(safe-area-inset-bottom)]keeps icons clear of thehome indicator.
Changed files
frontend/app/[team]/layout.tsx— responsive grid (md:divide-x md:grid-cols-…) +pb-14 md:pb-0frontend/components/layout/Sidebar.tsx— split desktop (hidden md:flex) vs. fixed mobile bar; addMobileOrgSwitcherNotes for reviewers
main; this is rebased onto currentmain, which had already reduced the top navbar to 48px — those values are preserved.tsc --noEmit(0 errors),next lint(clean),next build(compiled successfully).
Screenshots
Test plan