57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
|
|
import { AppSidebar } from "./app-sidebar"
|
|
import { MobileNav } from "@/components/navigation/mobile-nav"
|
|
import { useIsMobile } from "@/hooks/use-mobile"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { useNavigation } from "@/contexts/navigation-context"
|
|
|
|
interface MainLayoutProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export function MainLayout({ children }: MainLayoutProps) {
|
|
const isMobile = useIsMobile()
|
|
const { breadcrumbs, currentTitle } = useNavigation()
|
|
|
|
return (
|
|
<SidebarProvider>
|
|
<AppSidebar />
|
|
<SidebarInset>
|
|
{/* Header with breadcrumbs */}
|
|
<header className="flex h-16 shrink-0 items-center gap-2 border-b border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 transition-all duration-300 ease-in-out">
|
|
<div className="flex items-center gap-2 px-4 w-full">
|
|
<SidebarTrigger className="-ml-1 text-muted-foreground hover:text-primary transition-colors" />
|
|
<Separator orientation="vertical" className="mr-2 h-4 bg-border/50" />
|
|
<nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm bg-muted/30 px-3 py-1.5 rounded-full border border-border/30">
|
|
{breadcrumbs.length === 0 ? (
|
|
<span className="text-sm font-medium text-primary px-1">{currentTitle}</span>
|
|
) : (
|
|
breadcrumbs.map((crumb, index) => (
|
|
<span key={crumb.url} className="flex items-center gap-1">
|
|
{index > 0 && (
|
|
<span className="text-muted-foreground/50">/</span>
|
|
)}
|
|
{index === breadcrumbs.length - 1 ? (
|
|
<span className="text-sm font-medium text-primary px-1">{crumb.title}</span>
|
|
) : (
|
|
<span className="text-sm text-muted-foreground hover:text-foreground transition-colors px-1">{crumb.title}</span>
|
|
)}
|
|
</span>
|
|
))
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main content */}
|
|
<div className="flex-1 overflow-auto">
|
|
{children}
|
|
</div>
|
|
|
|
{/* Mobile bottom navigation */}
|
|
{isMobile && <MobileNav />}
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
)
|
|
}
|