feat(mobile): mount MobileLayout alongside desktop shell, remove legacy sidebar mobile-drawer

src/app/(dashboard)/layout.tsx

@@ -12,6 +12,7 @@ import { PortProvider } from '@/providers/port-provider';
 import { PermissionsProvider } from '@/providers/permissions-provider';
 import { Sidebar } from '@/components/layout/sidebar';
 import { Topbar } from '@/components/layout/topbar';
+import { MobileLayout } from '@/components/layout/mobile/mobile-layout';
 
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   const session = await auth.api.getSession({ headers: await headers() });
@@ -37,7 +38,8 @@ export default async function DashboardLayout({ children }: { children: React.Re
       <PortProvider ports={ports} defaultPortId={ports[0]?.id ?? null}>
         <PermissionsProvider>
           <SocketProvider>
-            <div className="flex h-screen overflow-hidden bg-background">
+            {/* Desktop shell — hidden by CSS on mobile */}
+            <div data-shell="desktop" className="flex h-screen overflow-hidden bg-background">
               <Sidebar
                 portRoles={portRoles}
                 isSuperAdmin={profile?.isSuperAdmin ?? false}
@@ -57,6 +59,9 @@ export default async function DashboardLayout({ children }: { children: React.Re
                 <main className="flex-1 overflow-y-auto bg-background p-6">{children}</main>
               </div>
             </div>
+
+            {/* Mobile shell — hidden by CSS on desktop */}
+            <MobileLayout>{children}</MobileLayout>
           </SocketProvider>
         </PermissionsProvider>
       </PortProvider>

src/components/layout/sidebar.tsx

@@ -22,19 +22,16 @@ import {
   Home,
   ChevronLeft,
   ChevronRight,
-  Menu,
   ChevronDown,
   ChevronUp,
 } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 import { useUIStore } from '@/stores/ui-store';
-import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import type { UserPortRole } from '@/lib/db/schema/users';
 import type { Role } from '@/lib/db/schema/users';
@@ -360,8 +357,6 @@ export function Sidebar({ portRoles, isSuperAdmin = false, user }: SidebarProps)
     portRoles.some((pr) => pr.residentialAccess || pr.role?.permissions?.residential_clients?.view);
 
   return (
-    <>
-      {/* Desktop sidebar */}
     <aside
       className={cn(
         'relative hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0',
@@ -380,30 +375,5 @@ export function Sidebar({ portRoles, isSuperAdmin = false, user }: SidebarProps)
         onToggleCollapse={toggleSidebar}
       />
     </aside>
-
-      {/* Mobile drawer */}
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="md:hidden fixed top-3 left-3 z-50 text-white bg-[#1e2844] hover:bg-[#171f35]"
-          >
-            <Menu className="w-5 h-5" />
-            <span className="sr-only">Open navigation</span>
-          </Button>
-        </SheetTrigger>
-        <SheetContent side="left" className="p-0 w-sidebar border-r-0">
-          <SidebarContent
-            collapsed={false}
-            portSlug={currentPortSlug ?? undefined}
-            portRoles={portRoles}
-            hasAdminAccess={hasAdminAccess}
-            hasMarinaAccess={hasMarinaAccess}
-            hasResidentialAccess={hasResidentialAccess}
-          />
-        </SheetContent>
-      </Sheet>
-    </>
   );
 }