Navigation

SidebarItem

사이드바 내비게이션의 개별 메뉴 아이템입니다. 아이콘 + 레이블 + ArrowRight 구조로, Full / IconOnly 두 가지 레이아웃을 지원합니다. subItems를 전달하면 클릭 시 SelectModal 서브메뉴 팝업이 열립니다.

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

인터랙티브 데모

항목을 클릭해 선택 상태가 올바르게 전환되는지 확인하세요.

Full (IconOnly=False)

IconOnly=True

현재 선택

selected: overview

홈·차트는 서브메뉴가 있습니다. Full에서는 인라인, IconOnly에서는 팝업으로 열립니다.

tsx

// 기본 — 라벨 포함
<SidebarItem icon={Home} label="홈" />

// 선택 상태
<SidebarItem icon={Home} label="홈" isSelected />

// 아이콘만 (접힌 사이드바)
<SidebarItem icon={Home} label="홈" iconOnly />

// 서브메뉴 포함 (expanded → 인라인 리스트, iconOnly → 팝업)
<SidebarItem
  icon={Home}
  label="홈"
  isSelected={selected === "home"}
  onClick={() => setSelected("home")}
  subItems={subItems}
  selectedSubItemId={selectedSubId}
  onSubItemSelect={setSelectedSubId}
/>

Variants

Figma Frame 145 · Sidebar Item 기반 4가지 variant

Default / Full

Selected / Full

Default / IconOnly

Selected / IconOnly

서브메뉴 (SelectModal)

subItems를 전달하면 클릭 시 우측에 SelectModal 팝업이 열립니다. href보다 우선합니다.

클릭하면 서브메뉴가 열립니다

선택된 서브메뉴

개요

팝업 외부 클릭 시 자동으로 닫힙니다.

tsx

const subItems: SelectItem[] = [
  { id: "overview", name: "개요", description: "홈 대시보드" },
  { id: "recent", name: "최근 활동" },
  { id: "pinned", name: "즐겨찾기" },
];

<SidebarItem
  icon={Home}
  label="홈"
  subItems={subItems}
  selectedSubItemId={selectedSubId}
  onSubItemSelect={setSelectedSubId}
/>

아이콘 조합

다양한 아이콘과 함께 사용하는 예시입니다.

Props

SidebarItem

Prop	Type	Required	Default	설명
`icon`	`ComponentType<{ className?: string }>`	✓	—	좌측 아이콘 컴포넌트
`label`	`string`	✓	—	메뉴 레이블 텍스트
`isSelected`	`boolean`	—	false	선택 상태. bg-primary-10 + text-primary 적용
`iconOnly`	`boolean`	—	false	접힌 상태 (아이콘만 표시, 48×48)
`href`	`string`	—	—	경로 제공 시 <Link>. subItems가 있으면 무시됩니다.
`onClick`	`() => void`	—	—	클릭 핸들러
`subItems`	`SelectItem[]` interface SelectItem { id: string; name: string; description?: string; avatarUrl?: string; }	—	—	전달 시 클릭하면 서브메뉴가 열립니다. expanded 상태 → 인라인 리스트, iconOnly 상태 → SelectModal 팝업. href보다 우선합니다.
`selectedSubItemId`	`string`	—	—	현재 선택된 서브메뉴 아이템 id
`onSubItemSelect`	`(id: string) => void`	—	—	서브메뉴 아이템 선택 시 콜백

상위← Sidebar 다음UserSpace →