COMPONENT: Sidebar Nav Item Component

[nayan458]

Task: Sidebar Nav Item Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface SidebarNavItemProps {
  label:      string;
  icon:       ReactNode;
  isActive?:  boolean;
  badge?:     number | string;   // count (3) or label ("new")
  badgeVariant?: 'danger' | 'info';
  onClick?:   () => void;
  className?: string;
}

Variants / States

State	Description
Default	Secondary text, no background
Active	Secondary bg, primary text, medium weight
Hover	Secondary bg, primary text
With danger badge	Red pill on right — used for Pending + Escalated counts
With info badge	Blue pill — used for Resolved count

Acceptance Criteria

• badge renders only when provided — no empty pill ghost
• isActive and hover states are visually distinct from each other
• Icon slot accepts any ReactNode — Lucide icons, emoji, SVG
• Full-width click target — not just the text
• Zero hardcoded hex values
• Storybook stories: default, active, with danger badge, with info badge

Notes

• Used in desktop Sidebar and as the basis for BottomNavItem on mobile — keep layout flexible enough to adapt to horizontal orientation
• Badge counts here must stay in sync with queue counts from useReports — the parent layout handles this, SidebarNavItem just renders what it receives