Renders an accessible, stateful sidebar navigation button that supports active, disabled, and unread notification states with animated label visibility. ## Key Components ### `NavigationSidebarItemButtonProps` | Prop | Type | Description | |------|------|-------------| | `item` | `NavigationSidebarItem` | Navigation item data (label, icon, active state, unread count) | | `showLabel` | `boolean` | Toggles label/unread badge visibility (collapsed vs. expanded sidebar) | | `disabled` | `boolean` | Disables interaction and applies muted styling | | `onClick` | `(item, event?) => void` | Click handler receiving the item and optional mouse event | ### `NavigationSidebarItemButton` The primary export. Renders a `` with four visual states driven by `isActive` and `disabled` combinations: - **Default** — hover background, secondary text/icon colors - **Active** — yellow-light background, accent left border, accent text/icon - **Disabled** — reduced opacity, `cursor-not-allowed`, secondary colors - **Active + Disabled** — secondary colors, no accent styling Unread count renders as a small dot badge on the icon when collapsed, or a numbered pill (capped at `99+`) beside the label when expanded. ## Usage Example ```typescript import { NavigationSidebarItemButton } from './navigation-sidebar-item' import { HomeIcon } from '../icons' const item = { label: 'Dashboard', icon: , isActive: true, unreadCount: 5, } console.log('Navigating to', item.label)} /> ``` > **Note:** Icon color is injected via `cloneElement`, so icons must accept a `color` prop to respond to active/disabled state changes.