Sidebar

앱·문서 레이아웃의 좌측 내비게이션 영역이에요. 접이식 그룹을 지원해요.

사용법

접이식 그룹

Sidebar.Collapsible로 섹션을 접었다 펼 수 있어요. Sidebar.Item에 asChild를 쓰면 Next.js Link와 연결할 수 있어요.

스타일 커스터마이징

Sidebar 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<Sidebar
  className="shadow-md"
  style={{
    --gtd-sidebar-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<Sidebar
  classNames={{
    root: "my-sidebar-root",
    header: "my-sidebar-header",
    content: "my-sidebar-content",
    item: "my-sidebar-item",
    collapsibleTrigger: "my-sidebar-collapsibleTrigger"
  }}
/>

CSS 변수

변수	설명
--gtd-sidebar-bg	사이드바 배경
--gtd-sidebar-item-active-bg	선택 항목 배경
--gtd-sidebar-item-active-color	선택 항목 글자색

인터페이스

SidebarProps

속성	타입	기본값	설명
Sidebar.Header	ReactNode	—	브랜드·제목 영역
Sidebar.Content	ReactNode	—	스크롤 가능한 메뉴
Sidebar.Footer	ReactNode	—	하단 액션
Sidebar.Collapsible	ReactNode	—	접이식 섹션
Sidebar.Item	ReactNode	—	메뉴 항목 (asChild로 Link 연결)
active	boolean	—	현재 페이지 강조
classNames	Record<string, string>	—	슬롯별 클래스 (root, label, input 등)
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { Sidebar } from "@/components/ui/Sidebar";