67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import * as React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
|
|
({ className, children, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"flex flex-col border-r bg-background transition-all duration-300",
|
|
"min-w-[240px] w-60 h-screen",
|
|
"dark:border-slate-700 dark:bg-slate-900",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
Sidebar.displayName = "Sidebar";
|
|
|
|
const SidebarHeader = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"flex h-16 items-center border-b bg-background px-6",
|
|
"z-40",
|
|
"shadow-sm",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
SidebarHeader.displayName = "SidebarHeader";
|
|
|
|
const SidebarContent = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"flex-1 overflow-auto py-2",
|
|
"scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-200",
|
|
"dark:scrollbar-thumb-slate-700",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
SidebarContent.displayName = "SidebarContent";
|
|
|
|
export {
|
|
Sidebar,
|
|
SidebarHeader,
|
|
SidebarContent,
|
|
};
|