From 46c3f1b23470c6546631d39123135c6de474c537 Mon Sep 17 00:00:00 2001
From: Sundaram Kumar Jha <jhasundaram@outlook.com>
Date: Mon, 13 Jul 2026 14:02:40 +0530
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20mobile=20bottom=20nav=20?=
 =?UTF-8?q?=E2=80=94=20resync=20with=20main,=20fix=20modal=20z-index,=20ad?=
 =?UTF-8?q?d=20mobile=20org=20switcher?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rebuild PR #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
---
 frontend/app/[team]/layout.tsx         |   6 +-
 frontend/components/layout/Sidebar.tsx | 173 ++++++++++++++++++++-----
 2 files changed, 143 insertions(+), 36 deletions(-)

diff --git a/frontend/app/[team]/layout.tsx b/frontend/app/[team]/layout.tsx
index 4833fa98e..b9c1a09c8 100644
--- a/frontend/app/[team]/layout.tsx
+++ b/frontend/app/[team]/layout.tsx
@@ -105,8 +105,8 @@ 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]'
       )}
     >
       {showUnlockDialog && <UnlockKeyringDialog organisation={activeOrganisation} />}
@@ -114,7 +114,7 @@ export default function RootLayout({
       {showNav && <Sidebar />}
       <div className="grid h-screen">
         <div></div>
-        <div className={clsx('overflow-auto', showNav && 'mt-12 min-h-[calc(100vh-48px)]')}>
+        <div className={clsx('overflow-auto', showNav && 'mt-12 min-h-[calc(100vh-48px)] pb-14 md:pb-0')}>
           {children}
         </div>
       </div>
diff --git a/frontend/components/layout/Sidebar.tsx b/frontend/components/layout/Sidebar.tsx
index 19ccd41c8..0e99e741c 100644
--- a/frontend/components/layout/Sidebar.tsx
+++ b/frontend/components/layout/Sidebar.tsx
@@ -224,6 +224,77 @@ const Sidebar = () => {
     )
   }
 
+  // Compact organisation switcher for the mobile bottom nav. Reuses the same
+  // switching logic as the desktop OrgsMenu but renders as a single icon that
+  // opens a menu upward. Only shown when the user belongs to multiple orgs.
+  const MobileOrgSwitcher = () => (
+    <Menu as="div" className="relative flex-1 h-full">
+      {({ open }) => (
+        <>
+          <Menu.Button
+            title={activeOrganisation?.name ? `Organisation: ${activeOrganisation.name}` : 'Switch organisation'}
+            aria-label="Switch organisation"
+            className={clsx(
+              'flex items-center justify-center w-full h-full transition-colors',
+              open ? 'text-zinc-900 dark:text-zinc-100' : 'text-zinc-500 dark:text-zinc-400'
+            )}
+          >
+            <span className="flex items-center justify-center w-7 h-7 rounded-full bg-neutral-500/20 ring-1 ring-inset ring-neutral-400/20 text-sm font-bold uppercase">
+              {activeOrganisation?.name?.[0]?.toUpperCase() ?? <FaExchangeAlt className="text-base" />}
+            </span>
+          </Menu.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute bottom-full right-2 mb-2 w-56 origin-bottom-right z-20 shadow-2xl divide-y divide-neutral-500/40 rounded-md bg-neutral-200 dark:bg-neutral-800 ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
+              <div className="px-1 py-1">
+                {organisations?.map((org: OrganisationType) => (
+                  <Menu.Item key={org.id}>
+                    {({ active }) => (
+                      <Link href={`/${org.name}`}>
+                        <div
+                          title={`Switch to ${org.name}`}
+                          className={`${
+                            active
+                              ? 'hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-neutral-100 dark:hover:bg-neutral-700'
+                              : 'text-zinc-700 dark:text-zinc-300 dark:hover:text-emerald-500'
+                          } group flex w-full gap-2 items-center justify-between px-2 py-2 border-b border-neutral-500/20`}
+                        >
+                          <div className="flex flex-col gap-0.5 min-w-0 flex-grow">
+                            <div>
+                              <PlanLabel plan={org?.plan!} />
+                            </div>
+                            <span className="truncate text-left font-medium text-sm">{org.name}</span>
+                          </div>
+                          <FaExchangeAlt className="flex-shrink-0" />
+                        </div>
+                      </Link>
+                    )}
+                  </Menu.Item>
+                ))}
+              </div>
+              {!isOwner && (
+                <div className="py-3 px-1 flex justify-center">
+                  <Link href="/onboard">
+                    <Button variant="secondary">
+                      <FaPlus /> Create New Organisation
+                    </Button>
+                  </Link>
+                </div>
+              )}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
+  )
+
   const links: SidebarLinkT[] = [
     {
       name: 'Home',
@@ -264,46 +335,82 @@ const Sidebar = () => {
   ]
 
   return (
-    <div
-      className={clsx(
-        'h-screen flex flex-col pt-12 transition-all duration-300',
-        collapsed ? 'w-16' : 'w-64'
-      )}
-    >
-      <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-3 p-3 grid grid-cols-1 w-full">
-          <div className={clsx(collapsed ? 'mb-2' : '')}>
-            <OrgsMenu />
+    <>
+      {/* Desktop / tablet sidebar (md and up) */}
+      <div
+        className={clsx(
+          'h-screen hidden md:flex flex-col pt-12 transition-all duration-300',
+          collapsed ? 'w-16' : 'w-64'
+        )}
+      >
+        <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-3 p-3 grid grid-cols-1 w-full">
+            <div className={clsx(collapsed ? 'mb-2' : '')}>
+              <OrgsMenu />
+            </div>
+            {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-2 w-full">
+            <button
+              onClick={() => setUserPreference(collapsed ? 'expanded' : 'collapsed')}
+              className="flex items-center justify-center p-1.5 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-sm" />
+              ) : (
+                <FaAngleDoubleLeft className="text-sm" />
+              )}
+            </button>
           </div>
+        </nav>
+      </div>
+
+      {/*
+        Mobile bottom navigation (below md). Mirrors the mobile pattern used by
+        apps like Twitter/X. Uses z-10 (matching the top NavBar) rather than a
+        higher layer so HeadlessUI dialogs — which render at z-10 via a portal to
+        <body> — correctly appear above it instead of the bar covering the modal.
+        pb-[env(safe-area-inset-bottom)] keeps icons clear of the iOS home indicator.
+      */}
+      <nav
+        aria-label="Primary"
+        className="fixed bottom-0 inset-x-0 z-10 md:hidden border-t border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 pb-[env(safe-area-inset-bottom)]"
+      >
+        <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}
+              aria-current={link.active ? 'page' : undefined}
+              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>
           ))}
-        </div>
-
-        {/* Bottom section with collapse/expand button */}
-        <div className="p-2 w-full">
-          <button
-            onClick={() => setUserPreference(collapsed ? 'expanded' : 'collapsed')}
-            className="flex items-center justify-center p-1.5 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-sm" />
-            ) : (
-              <FaAngleDoubleLeft className="text-sm" />
-            )}
-          </button>
+          {showOrgsMenu && <MobileOrgSwitcher />}
         </div>
       </nav>
-    </div>
+    </>
   )
 }