letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matt Ciaccio
2026-04-29 14:18:28 +02:00
parent b0a11f1785
commit 19bc2f2a54
2 changed files with 24 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/(dashboard)/layout.tsx
View File

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

66
src/components/layout/sidebar.tsx
View File

@@ -22,19 +22,16 @@ import {
Home, Home,
ChevronLeft, ChevronLeft,
ChevronRight, ChevronRight,
Menu,
ChevronDown, ChevronDown,
ChevronUp, ChevronUp,
} from 'lucide-react'; } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useUIStore } from '@/stores/ui-store'; import { useUIStore } from '@/stores/ui-store';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator'; import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area'; 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import type { UserPortRole } from '@/lib/db/schema/users'; import type { UserPortRole } from '@/lib/db/schema/users';
import type { Role } from '@/lib/db/schema/users'; import type { Role } from '@/lib/db/schema/users';
@@ -360,50 +357,23 @@ export function Sidebar({ portRoles, isSuperAdmin = false, user }: SidebarProps)
portRoles.some((pr) => pr.residentialAccess || pr.role?.permissions?.residential_clients?.view); portRoles.some((pr) => pr.residentialAccess || pr.role?.permissions?.residential_clients?.view);
return ( return (
<> <aside
{/* Desktop sidebar */} className={cn(
<aside 'relative hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0',
className={cn( sidebarCollapsed ? 'w-sidebar-collapsed' : 'w-sidebar',
'relative hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0', )}
sidebarCollapsed ? 'w-sidebar-collapsed' : 'w-sidebar', style={{ backgroundColor: '#1e2844' }}
)} >
style={{ backgroundColor: '#1e2844' }} <SidebarContent
> collapsed={sidebarCollapsed}
<SidebarContent portSlug={currentPortSlug ?? undefined}
collapsed={sidebarCollapsed} portRoles={portRoles}
portSlug={currentPortSlug ?? undefined} hasAdminAccess={hasAdminAccess}
portRoles={portRoles} hasMarinaAccess={hasMarinaAccess}
hasAdminAccess={hasAdminAccess} hasResidentialAccess={hasResidentialAccess}
hasMarinaAccess={hasMarinaAccess} user={user}
hasResidentialAccess={hasResidentialAccess} onToggleCollapse={toggleSidebar}
user={user} />
onToggleCollapse={toggleSidebar} </aside>
/>
</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>
</>
); );
} }