Navigation

Sidebar

Dark Mode

2-depth 사이드바 컴포넌트입니다. SidebarRail(아이콘/텍스트 토글)과 SidebarPanel(서브 메뉴)로 구성됩니다. collapsed 상태는 내부에서 관리하며, isSelected된 아이템에 sections가 있으면 서브패널을 항상 표시합니다. 메뉴 선택 시 sections가 있으면 첫 번째 서브아이템이 기본 선택되어야 합니다.

import { Sidebar } from "@/shared/ui/widget/navigation"

인터랙티브 데모

현재 선택

메뉴

works

서브 아이템

w-1

팀

전체

URL

/works/1/dashboard

테스트

서브 아이템 클릭 → 선택 + URL 표시
외부 서비스 → ExternalLink 아이콘 확인
하단 토글 → 아이콘/텍스트 전환
대시보드 → 서브패널 없이 직접 선택

tsx

<Sidebar
  items={navItems}
  logoHref="/"
  user={{ userName: "김민준", spaceName: "D-Camp" }}
  team={{
    teams: [
      { id: "all", name: "전체" },
      { id: "growth", name: "그로스팀" },
    ],
    selectedId: teamId,
    onSelect: setTeamId,
  }}
/>

Props

Sidebar

Prop	Type	Required	Default	설명
`items`	`SidebarNavItem[]` interface SidebarNavItem { id: string; icon: React.ComponentType<{ className?: string }>; label: string; href?: string; onClick?: () => void; isSelected?: boolean; sections?: SidebarSection[]; dividerAfter?: boolean; }	✓	—	네비게이션 아이템 목록
`logoHref`	`string`	—	—	로고 클릭 시 이동할 URL
`user`	`SidebarUserConfig` interface SidebarUserConfig { userName: string; avatarUrl?: string; }	—	—	하단 유저 영역 설정 (아바타 + 이름 + 계정정보/로그아웃 메뉴)
`team`	`SidebarTeamConfig` interface SidebarTeamConfig { teams: TeamOption[]; selectedId: string; onSelect: (id: string) => void; }	—	—	팀 선택기 — 메뉴 필터링용
`className`	`string`	—	—	최상위 aside에 추가할 클래스

SidebarNavItem

Prop	Type	Required	Default	설명
`id`	`string`	✓	—	고유 식별자
`icon`	`ComponentType<{ className?: string }>`	✓	—	레일에 표시할 아이콘 컴포넌트
`label`	`string`	✓	—	메뉴 레이블 (툴팁 및 패널 헤더에 사용)
`href`	`string`	—	—	직접 이동 경로. sections가 있는 경우 서브패널이 표시됨
`isSelected`	`boolean`	—	false	활성화 상태. sections가 있으면 서브패널 표시 여부도 결정. 선택 시 첫 번째 서브아이템을 기본 선택해야 함
`sections`	`SidebarSection[]`	—	—	서브패널에 표시할 섹션 목록. isSelected일 때 항상 표시되며, 메뉴 선택 시 첫 번째 서브아이템이 기본 선택됨
`dividerAfter`	`boolean`	—	false	이 아이템 아래에 시각적 구분선 표시

SidebarSection

Prop	Type	Required	Default	설명
`title`	`string`	—	—	섹션 헤더 라벨 (예: 'MANAGE'). 생략 시 헤더 없이 표시
`items`	`SidebarSubItem[]`	✓	—	섹션 내 메뉴 아이템 목록

SidebarSubItem

Prop	Type	Required	Default	설명
`id`	`string`	✓	—	고유 식별자
`label`	`string`	✓	—	메뉴 텍스트 레이블
`href`	`string`	—	—	이동할 경로
`isSelected`	`boolean`	—	false	현재 선택된 상태
`badge`	`string`	—	—	뱃지 텍스트 (예: 'NEW')
`external`	`boolean`	—	false	외부 링크 여부. true면 새 탭으로 열리고 ExternalLink 아이콘 표시

SidebarTeamConfig

Prop	Type	Required	Default	설명
`teams`	`TeamOption[]`	✓	—	선택 가능한 팀 목록
`selectedId`	`string`	✓	—	현재 선택된 팀 id
`onSelect`	`(id: string) => void`	✓	—	팀 선택 콜백