Navigation
SidebarItem
사이드바 내비게이션의 개별 메뉴 아이템입니다. 아이콘 + 레이블 + ArrowRight 구조로, Full / IconOnly 두 가지 레이아웃을 지원합니다.
import { SidebarItem } from "@/shared/ui/navigation"인터랙티브 데모
항목을 클릭해 선택 상태가 올바르게 전환되는지 확인하세요.
Full (IconOnly=False)
IconOnly=True
현재 선택
홈 — 두 사이드바가 동일한 상태를 공유합니다.
클릭하면 selected 상태가 변경됩니다.
Variants
Figma Frame 145 · Sidebar Item 기반 4가지 variant
Default / Full
Selected / Full
Default / IconOnly
Selected / IconOnly
아이콘 조합
다양한 아이콘과 함께 사용하는 예시입니다.
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>, 없으면 <button> |
onClick | () => void | — | — | 클릭 핸들러 |