ShellCollapsibleNav
harness-navigation반응형 접이식 네비게이션. docked/overlay/full-overlay 모드를 자동 전환하고, 아이콘 전용 축소를 지원합니다.
ShellCollapsibleNav Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 네비게이션 항목 콘텐츠 |
width | number | — | 확장 시 너비 (기본 280px) |
collapsedWidth | number | — | 축소 시 너비 (기본 56px) |
mode | "docked" | "overlay" | "full-overlay" | — | 강제 모드 지정 |
collapsible | boolean | — | 아이콘 전용 축소 허용 (기본 true) |
collapsed | boolean | — | 제어 모드 축소 상태 |
onCollapsedChange | (collapsed: boolean) => void | — | 축소 상태 변경 콜백 |
showToggle | boolean | — | 토글 버튼 표시 (기본 true) |
side | "left" | "right" | — | 도킹 위치 (기본 left) |
label | string | — | nav 랜드마크 aria-label |
Import
tsx
import { ShellCollapsibleNav } from "@reopt-ai/opt-shell";