import { useRef } from "react"; import { ImperativePanelHandle } from "react-resizable-panels"; import { ResizablePanel, ResizablePanelGroup } from "./ui/resizable"; const CollapsibleSidebar = () => { const sidebarRef = useRef<ImperativePanelHandle>(null); return ( <ResizablePanelGroup direction="horizontal"> <ResizablePanel collapsible maxSize={15} defaultSize={15} collapsedSize={3} ref={sidebarRef} className="h-screen bg-blue-300 transition-all" > <button onClick={() => { if (sidebarRef.current?.isCollapsed()) sidebarRef.current?.expand(); else sidebarRef.current?.collapse(); }} > Toggle </button> {/* sidebar content */} </ResizablePanel> <ResizablePanel className="bg-green-300" defaultSize={85}> {/* main content */} </ResizablePanel> </ResizablePanelGroup> ); }; export default CollapsibleSidebar;