Skip to content

feat: add mobile bottom navigation bar #771

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nimish-ks wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add mobile bottom navigation bar #771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0335cad
feat: add mobile bottom navigation bar
nimish-ks Feb 14, 2026
0a5d9e2
feat: enhance sidebar links with accessibility attributes
nimish-ks Feb 14, 2026
d2ea264
Merge branch 'main' into feat/mobile-bottom-nav
nimish-ks Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/app/[team]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,16 @@ export default function RootLayout({
return (
<div
className={clsx(
'w-full h-screen overflow-hidden grid divide-x divide-neutral-300 dark:divide-neutral-800',
showNav && 'grid-cols-[max-content_1fr]'
'w-full h-screen overflow-hidden grid divide-neutral-300 dark:divide-neutral-800',
showNav && 'md:divide-x md:grid-cols-[max-content_1fr]'
)}
>
{activeOrganisation && <UnlockKeyringDialog organisation={activeOrganisation} />}
{showNav && <NavBar />}
{showNav && <Sidebar />}
<div className="grid h-screen">
<div></div>
<div className={clsx('overflow-auto', showNav && 'mt-16 min-h-[calc(100vh-64px)]')}>
<div className={clsx('overflow-auto', showNav && 'mt-16 min-h-[calc(100vh-64px)] pb-14 md:pb-0')}>
{children}
</div>
</div>
Expand Down
89 changes: 57 additions & 32 deletions frontend/components/layout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,44 +250,69 @@ const Sidebar = () => {
]

return (
<div
className={clsx(
'h-screen flex flex-col pt-[64px] transition-all duration-300',
collapsed ? 'w-20' : 'w-72'
)}
>
<nav className="flex flex-col divide-y divide-neutral-300 dark:divide-neutral-800 items-start justify-between h-full bg-neutral-100/70 dark:bg-neutral-800/20 text-black dark:text-white">
{/* Main navigation area */}
<div className="gap-4 p-4 grid grid-cols-1 w-full">
<OrgsMenu />
<>
{/* Desktop/tablet sidebar */}
<div
className={clsx(
'h-screen hidden md:flex flex-col pt-[64px] transition-all duration-300',
collapsed ? 'w-20' : 'w-72'
)}
>
<nav className="flex flex-col divide-y divide-neutral-300 dark:divide-neutral-800 items-start justify-between h-full bg-neutral-100/70 dark:bg-neutral-800/20 text-black dark:text-white">
{/* Main navigation area */}
<div className="gap-4 p-4 grid grid-cols-1 w-full">
<OrgsMenu />
{links.map((link) => (
<SidebarLink
key={link.name}
name={link.name}
href={link.href}
icon={link.icon}
active={link.active}
collapsed={collapsed}
/>
))}
</div>

{/* Bottom section with collapse/expand button */}
<div className="p-4 w-full">
<button
onClick={() => setUserPreference(collapsed ? 'expanded' : 'collapsed')}
className="flex items-center justify-center p-3 w-full text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-lg"
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
{collapsed ? (
<FaAngleDoubleRight className="text-xl" />
) : (
<FaAngleDoubleLeft className="text-xl" />
)}
</button>
</div>
</nav>
</div>

{/* Mobile bottom navigation */}
<nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden border-t border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900">
Copy link
Copy Markdown

@cursor cursor Bot Feb 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mobile nav z-index renders above modal dialogs

Medium Severity

The new mobile bottom nav has z-50, but UnlockKeyringDialog (and likely other HeadlessUI dialogs) use z-10. Since the grid container creates no intermediate stacking context and HeadlessUI's Dialog renders via a Portal to document.body, these z-indices are compared at the root level. The bottom nav bar will visually appear on top of the dialog overlay and backdrop on mobile, breaking the modal experience and potentially allowing users to tap nav links through the modal.

Fix in Cursor Fix in Web

<div className="flex items-center justify-around h-14">
{links.map((link) => (
<SidebarLink
<Link
key={link.name}
name={link.name}
href={link.href}
icon={link.icon}
active={link.active}
collapsed={collapsed}
/>
title={link.name}
aria-label={link.name}
className={clsx(
'flex items-center justify-center flex-1 h-full text-xl transition-colors',
link.active
? 'text-zinc-900 dark:text-zinc-100'
: 'text-zinc-500 dark:text-zinc-400'
)}
>
{link.icon}
</Link>
Comment thread
cursor[bot] marked this conversation as resolved.
Copy link
Copy Markdown

@cursor cursor Bot Feb 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No organization switching capability on mobile

High Severity

The mobile bottom navigation displays only the five main navigation links but omits the OrgsMenu component that enables switching between organizations. Users with multiple organizations have no way to switch between them when accessing the application on mobile devices (screens below 768px), creating a critical functional gap. The OrgsMenu is only rendered in the desktop sidebar at line 264.

Fix in Cursor Fix in Web

))}
</div>

{/* Bottom section with collapse/expand button */}
<div className="p-4 w-full">
<button
onClick={() => setUserPreference(collapsed ? 'expanded' : 'collapsed')}
className="flex items-center justify-center p-3 w-full text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-lg"
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
{collapsed ? (
<FaAngleDoubleRight className="text-xl" />
) : (
<FaAngleDoubleLeft className="text-xl" />
)}
</button>
</div>
</nav>
</div>
</>
)
}

Expand Down