Navigation

Sidebar

SidebarItem, UserSpace, Logo를 조합한 사이드 네비게이션 컴포넌트입니다. collapsed prop으로 확장/축소 상태를 제어하고, onToggleCollapse를 전달하면 접기 버튼이 자동으로 생성됩니다.

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

인터랙티브 데모

Controls

collapsed = false

현재 상태

width: 212px

mode: expanded

selectedMenu: 대시보드

selectedSpace: invest

Figma의 투자사 / 투자사folded / 스타트업 / 스타트업folder 총 4가지 variant에 대응합니다.

Expanded (default)

Expanded + Toggle

Collapsed (Icon Only)

Collapsed + Toggle

user prop을 생략하면 유저 영역이 렌더되지 않습니다.

Prop	Type	Required	Default	설명
`items`	`SidebarNavItem[]` interface SidebarNavItem { icon: React.ComponentType<{ className?: string }>; label: string; href?: string; onClick?: () => void; isSelected?: boolean; }	✓	—	네비게이션 아이템 목록
`collapsed`	`boolean`	—	false	접힌 상태 (80px, 아이콘 전용)
`onToggleCollapse`	`() => void`	—	—	전달 시 로고 옆에 접기/펼치기 버튼 노출
`logoHref`	`string`	—	—	로고 클릭 시 이동할 URL
`user`	`SidebarUserConfig` interface SidebarUserConfig { userName: string; spaceName: string; avatarUrl?: string; spaces?: SpaceOption[]; selectedSpaceId?: string; onSpaceSelect?: (id: string) => void; }	—	—	하단 유저 영역 설정
`className`	`string`	—	—	최상위 aside에 추가할 클래스

Prop	Type	Required	Default	설명
`icon`	`ComponentType<{ className?: string }>`	✓	—	아이콘 컴포넌트
`label`	`string`	✓	—	메뉴 레이블
`href`	`string`	—	—	이동 경로 (없으면 button)
`isSelected`	`boolean`	—	false	활성화 상태
`onClick`	`() => void`	—	—	클릭 핸들러