xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
14 lines (13 loc) • 1.74 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { AppSidebar } from '../../components/app-sidebar.js';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '../../components/ui/breadcrumb.js';
import { Separator } from '../../components/ui/separator.js';
import { SidebarInset, SidebarProvider, SidebarTrigger, } from '../../components/ui/sidebar.js';
const SidebarLayout = React.forwardRef(({ className, breadcrumbItems = [], children, ...props }, ref) => {
const [collapsed, setCollapsed] = React.useState(false);
return (_jsxs(SidebarProvider, { collapsed: collapsed, onCollapsedChange: setCollapsed, children: [_jsx(AppSidebar, { collapsed: collapsed }), _jsxs(SidebarInset, { children: [_jsxs("header", { className: "flex h-16 shrink-0 items-center gap-2 border-b px-4", children: [_jsx(SidebarTrigger, { className: "-ml-1", collapsed: collapsed, onCollapsedChange: setCollapsed }), _jsx(Separator, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }), _jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { children: breadcrumbItems.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 && (_jsx(BreadcrumbSeparator, { className: "hidden md:block" })), _jsx(BreadcrumbItem, { className: "hidden md:block", children: item.isCurrent ? (_jsx(BreadcrumbPage, { children: item.label })) : (_jsx(BreadcrumbLink, { href: item.href || "#", children: item.label })) })] }, index))) }) })] }), _jsx("div", { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: children })] })] }));
});
SidebarLayout.displayName = "SidebarLayout";
export { SidebarLayout };