Sidebar
설치 확인접히는 왼쪽 탐색, 좁은 화면 대응
1. 목적과 출처
접히는 왼쪽 탐색, 좁은 화면 대응
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/sidebar.tsx- Registry
@adcapsule/sidebar
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 상태 | 모양 |
|---|---|
| 펼침 | |
| 아이콘만 collapsible="icon" | |
| 떠 있는 패널 variant="floating" |
3. 속성 바꿔 보기
variant
collapsible
4. 설치와 사용
- npm 패키지
- @base-ui/react, class-variance-authority, lucide-react
- 함께 설치
- @adcapsule/button, @adcapsule/input, @adcapsule/separator, @adcapsule/sheet, @adcapsule/skeleton, @adcapsule/tooltip, @adcapsule/use-mobile, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- variant: sidebar·floating·inset
- collapsible: offcanvas·icon·none
- ⌘B / Ctrl+B로 접기·펴기
- 768px 미만에서는 시트(Sheet)로 열림
- 열림 상태는 sidebar_state 쿠키에 저장
공통으로 유지할 토큰
- shell.sidebar-width (240px)
- shell.sidebar-width-mobile (288px)
- shell.sidebar-width-icon (48px)
- surface.sidebar
- control.height.sm·md (메뉴 항목)