58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import { Menu } from 'lucide-react'
|
|
import { Outlet } from 'react-router-dom'
|
|
|
|
import { OrganizationSwitcher } from '@/components/organization/organization-switcher'
|
|
import { AppLogo } from '@/components/navigation/app-logo'
|
|
import { SidebarNav } from '@/components/navigation/sidebar'
|
|
import { UserMenu } from '@/components/navigation/user-menu'
|
|
import { ThemeToggle } from '@/components/theme/theme-toggle'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
|
|
|
|
export const AppShell = () => {
|
|
return (
|
|
<div className="flex min-h-screen bg-background text-foreground">
|
|
<aside className="hidden w-64 flex-col border-r bg-card/30 p-4 shadow-sm md:flex">
|
|
<AppLogo className="mb-6" />
|
|
<OrganizationSwitcher />
|
|
<div className="mt-6 flex-1">
|
|
<SidebarNav />
|
|
</div>
|
|
</aside>
|
|
<div className="flex flex-1 flex-col">
|
|
<header className="flex items-center justify-between border-b bg-card/30 px-4 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="md:hidden">
|
|
<Menu className="h-5 w-5" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="w-64">
|
|
<AppLogo className="mb-6" />
|
|
<OrganizationSwitcher />
|
|
<div className="mt-6">
|
|
<SidebarNav />
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
<div className="md:hidden">
|
|
<AppLogo />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="hidden sm:block">
|
|
<OrganizationSwitcher />
|
|
</div>
|
|
<ThemeToggle />
|
|
<UserMenu />
|
|
</div>
|
|
</header>
|
|
<main className="flex-1 bg-muted/20 p-4 md:p-6">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|