File name
Commit message
Commit date
File name
Commit message
Commit date
import type { ReactNode } from "react";
interface SidebarProps {
header?: ReactNode;
children: ReactNode;
footer?: ReactNode;
/** 배치(레이아웃) 조정용 클래스 패스스루만 허용 — 디자인 값 주입 금지. */
className?: string;
}
/** 사이드바 셸(컨테이너). 내비게이션 항목 구성·활성 상태 판단은 호출부(feature) 책임. */
export function Sidebar({ header, children, footer, className }: SidebarProps) {
return (
<aside
className={`flex h-full w-64 flex-col border-r border-border bg-surface ${className ?? ""}`}
>
{header && <div className="border-b border-border p-4">{header}</div>}
<nav className="flex-1 overflow-y-auto p-2">{children}</nav>
{footer && <div className="border-t border-border p-4">{footer}</div>}
</aside>
);
}