Navigation

Sidebar

SidebarItem, UserSpace, Logo를 조합한 사이드 네비게이션 컴포넌트입니다. collapsed prop으로 확장/축소 상태를 제어합니다. 접기/펼치기 토글 버튼은 MainHeader에 위치하며, 공통 부모(page)에서 하나의 collapsed 상태를 Sidebar와 MainHeader에 동시에 주입하여 연동합니다.

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

인터랙티브 데모

Controls

collapsed = false

현재 상태

width: 212px

mode: expanded

selected: overview

selectedSpace: invest

tsx

// 현재 위치를 단일 id로 관리합니다 (서브메뉴 id도 동일 state)
const [selected, setSelected] = useState("overview");

const navItems: SidebarNavItem[] = [
  {
    icon: ChartPie,
    label: "대시보드",
    // 서브아이템 중 하나가 선택되면 부모도 isSelected
    isSelected: SUB_DASHBOARD.some((s) => s.id === selected),
    subItems: SUB_DASHBOARD,
    selectedSubItemId: selected,
    onSubItemSelect: setSelected,
  },
  {
    icon: BriefcaseBusiness,
    label: "기업 관리",
    isSelected: selected === "company",
    onClick: () => setSelected("company"),
  },
  // ...
];

Variants

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

Expanded (default)

Collapsed (Icon Only)

토글 버튼은 MainHeader에 위치합니다. 실제 동작은 AppLayout 문서의 인터랙티브 데모에서 확인하세요.

유저 영역 없음

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

Props

Sidebar

Prop	Type	Required	Default	설명
`items`	`SidebarNavItem[]` interface SidebarNavItem { icon: React.ComponentType<{ className?: string }>; label: string; href?: string; onClick?: () => void; isSelected?: boolean; subItems?: SelectItem[]; selectedSubItemId?: string; onSubItemSelect?: (id: string) => void; }	✓	—	네비게이션 아이템 목록
`collapsed`	`boolean`	—	false	접힌 상태 (true: 80px 아이콘 전용 / false: 212px 전체). 상태는 page가 소유하며 MainHeader의 onToggleCollapse와 함께 연동합니다.
`logoHref`	`string`	—	—	로고 클릭 시 이동할 URL
`user`	`SidebarUserConfig` interface SidebarUserConfig { userName: string; spaceName: string; avatarUrl?: string; spaces?: SelectItem[]; selectedSpaceId?: string; onSpaceSelect?: (id: string) => void; }	—	—	하단 유저 영역 설정
`className`	`string`	—	—	최상위 aside에 추가할 클래스

SidebarNavItem

Prop	Type	Required	Default	설명
`icon`	`ComponentType<{ className?: string }>`	✓	—	아이콘 컴포넌트
`label`	`string`	✓	—	메뉴 레이블
`href`	`string`	—	—	이동 경로 (없으면 button)
`isSelected`	`boolean`	—	false	활성화 상태
`onClick`	`() => void`	—	—	클릭 핸들러
`subItems`	`SelectItem[]`	—	—	전달 시 클릭하면 서브메뉴가 열립니다. expanded → 인라인 리스트, iconOnly → SelectModal 팝업.
`selectedSubItemId`	`string`	—	—	현재 선택된 서브메뉴 id. 단일 selected 상태를 공유합니다.
`onSubItemSelect`	`(id: string) => void`	—	—	서브메뉴 선택 시 콜백