31f02a80d8
- Move toggle icon next to three-dots menu in a shared flex container - Toggle icon fades in/out with opacity transition instead of hard mount/unmount - Properties panel slides in/out with width + opacity transition (200ms ease-in-out) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { X } from "lucide-react";
|
|
import { usePanel } from "../context/PanelContext";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
|
|
export function PropertiesPanel() {
|
|
const { panelContent, panelVisible, setPanelVisible } = usePanel();
|
|
|
|
if (!panelContent) return null;
|
|
|
|
return (
|
|
<aside
|
|
className="hidden md:flex border-l border-border bg-card flex-col shrink-0 overflow-hidden transition-[width,opacity] duration-200 ease-in-out"
|
|
style={{ width: panelVisible ? 320 : 0, opacity: panelVisible ? 1 : 0 }}
|
|
>
|
|
<div className="w-80 flex-1 flex flex-col min-w-[320px]">
|
|
<div className="flex items-center justify-between px-4 py-2 border-b border-border">
|
|
<span className="text-sm font-medium">Properties</span>
|
|
<Button variant="ghost" size="icon-xs" onClick={() => setPanelVisible(false)}>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<ScrollArea className="flex-1">
|
|
<div className="p-4">{panelContent}</div>
|
|
</ScrollArea>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|