Sidebar
shell접기/펼치기를 지원하는 compound 사이드바. Header/Content/Footer 구조 + Group/Item으로 네비게이션 구성. Ctrl+[ 단축키.
컴포넌트 의존 관계
깊이
100%
실전 패턴 — 접기/펼치기 + 유저 프로필
대시보드
Ctrl+[ 로 사이드바 토글
AppShell + Sidebar 조합
Pro
홈
AppShell.Header + AppShell.Sidebar + AppShell.Content 조합
메인 콘텐츠 영역
side=right — 속성 패널
에디터 영역
테스트 커버리지
2026년 2월 4일생성된 테스트 결과를 찾지 못했습니다.
Sidebar 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
Sidebar Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | Sidebar.Header, Sidebar.Content, Sidebar.Footer 자식 요소 |
collapsible | boolean | false | 접기/펼치기 토글 지원 |
defaultCollapsed | boolean | false | 초기 접힘 상태 |
collapsed | boolean | — | 제어 모드: 접힘 상태 |
onCollapsedChange | (collapsed: boolean) => void | — | 제어 모드: 접힘 상태 변경 핸들러 |
width | number | 280 | 펼침 상태 너비 (px) |
collapsedWidth | number | 56 | 접힘 상태 너비 (px) |
side | "left" | "right" | "left" | 사이드바 위치 |
label | string | "사이드바" | aside aria-label |
className | string | — | 커스텀 CSS 클래스 |
Sidebar.Group Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | Sidebar.Item 요소들 |
label | string | — | 그룹 레이블 (접힌 상태에서 숨겨짐) |
className | string | — | 커스텀 CSS 클래스 |
Sidebar.Item Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 항목 레이블 텍스트 |
icon | ReactNode | — | 아이콘 (접힌 상태에서도 표시) |
active | boolean | false | 활성 상태 (aria-current=page) |
onClick | () => void | — | 클릭 핸들러 |
href | string | — | 링크 URL — 설정 시 <a> 태그로 렌더링 |
tooltip | string | — | 접힌 상태에서 Tooltip 표시 (미지정 시 children 텍스트) |
badge | ReactNode | — | 우측 배지 (숫자/텍스트). 접힌 상태에서 아이콘 위 dot으로 축소 |
className | string | — | 커스텀 CSS 클래스 |
Import
tsx
import { Sidebar, useSidebar } from "@reopt-ai/opt-ui";키보드 동작
| 키 | 동작 |
|---|---|
| Ctrl+[ | 사이드바 접기/펼치기 토글 |