51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface CollapsibleSidebarProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
initialExpanded?: boolean;
|
|
}
|
|
|
|
export function CollapsibleSidebar({ children, className, initialExpanded = true }: CollapsibleSidebarProps) {
|
|
const [isExpanded, setIsExpanded] = useState(initialExpanded);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"border-r bg-muted/30 transition-all duration-300 relative flex-shrink-0 group",
|
|
isExpanded ? "w-52" : "w-3 hover:w-4 bg-muted/50 cursor-pointer",
|
|
className
|
|
)}
|
|
onClick={(e) => {
|
|
if (!isExpanded) setIsExpanded(true);
|
|
}}
|
|
>
|
|
{/* Toggle Button */}
|
|
{isExpanded && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsExpanded(false);
|
|
}}
|
|
className="absolute top-2 right-2 z-20 p-1 hover:bg-background/50 rounded-sm transition-colors"
|
|
title="Collapse sidebar"
|
|
>
|
|
<ChevronLeft className="h-3.5 w-3.5 text-muted-foreground" />
|
|
</button>
|
|
)}
|
|
|
|
{/* Content Container */}
|
|
<div className={cn(
|
|
"h-full overflow-y-auto p-3",
|
|
isExpanded ? "opacity-100" : "opacity-0 pointer-events-none hidden"
|
|
)}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|