SidePanel Component

SidePanel

Right-side panel rendered with a portal into document.body.

Key behaviors

• Uses createPortal(...) to render outside normal tree
• Includes overlay that closes panel on click
• Supports transparent mode via data-transparent
• Exported as error-boundary-wrapped SidePanel
• Includes SidePanelButton helper for trigger + panel state

Main Props

interface SidePanelProps {
    title: string;
    isOpen: boolean;
    onClose: () => void;
    transparent?: boolean;
    children?: React.ReactNode;
}

Usage

import SidePanel, { SidePanelButton } from "@/components/SidePanel";

<SidePanel
    title="Details"
    isOpen={isOpen}
    onClose={() => setOpen(false)}
>
    <Details />
</SidePanel>;

<SidePanelButton sidePanelTitle="Details" title="Open details">
    <Details />
</SidePanelButton>