← 목록으로
기능 설명
- 사이드바 접기/펼치기: 왼쪽 상단 화살표 버튼 클릭
- 중첩 메뉴: "사용자", "프로젝트" 메뉴 클릭 시 하위 메뉴 표시
- 활성 상태: 현재 페이지는 파란색으로 하이라이트
- 알림 배지: 읽지 않은 메시지나 알림 수 표시
- 툴팁: 사이드바 접힌 상태에서 메뉴 호버 시 라벨 표시
- 반응형: 모바일에서는 햄버거 메뉴로 전환
39. 사이드바 네비게이션
Design a dashboard sidebar navigation:
**Container**:
- Width: 240px expanded, 72px collapsed
- Height: 100vh, fixed position
- Background: white or gray-900 (dark variant)
- Border-right: 1px gray-200
- Transition: width 200ms ease
**Logo Area**:
- Padding: 20px
- Logo + wordmark expanded
- Logo icon only collapsed
- Collapse toggle button
**Navigation Groups**:
- Section header: 11px uppercase, gray-500
- 8px gap between groups
- Divider line between major sections
**Nav Item**:
- Height: 44px
- Padding: 0 12px
- Border-radius: 8px
- Icon (20px) + label + badge/count
**Nav Item States**:
- Default: gray-600 text
- Hover: gray-900 text, gray-100 bg
- Active: brand color text, brand-50 bg, left border
- Disabled: gray-400, cursor-not-allowed
**Nested Navigation**:
- Collapsible with chevron
- Child items indented 32px
- Parent remains highlighted when child active
**Badge/Count**:
- Right-aligned
- Red dot for notifications
- Number badge for counts
**Collapsed State**:
- Icons only
- Hover: tooltip with label
- Nested: expand on hover as mini-menu
**User Section** (bottom):
- Avatar + name + role
- Dropdown: profile, settings, logout
- Collapsed: avatar only
**Mobile**:
- Overlay sidebar
- Hamburger trigger from header
- Backdrop click to close
Tech: React + Headless UI + Tailwind + Framer Motion