A Storybook configuration file that provides interactive examples and documentation for the NavigationSidebar component, including mock navigation items and various display scenarios.
## Key Components
- **Mock Navigation Items**: Predefined navigation configurations with icons, labels, and paths for dashboard, organizations, devices, and scripts
- **Story Configuration**: Meta configuration with fullscreen layout, decorators, and component documentation
- **Default Story**: Interactive example with stateful navigation handling and active item switching
- **Decorator Setup**: Wrapper that provides a realistic layout context with main content area alongside the sidebar
## Usage Example
```typescript
// The stories demonstrate various NavigationSidebar configurations
const navigationConfig: NavigationSidebarConfig = {
items: [
{
id: 'dashboard',
label: 'Dashboard',
icon: ,
path: '/dashboard',
isActive: true,
},
{
id: 'settings',
label: 'Settings',
icon: ,
path: '/settings',
section: 'secondary',
},
],
onNavigate: (path) => console.log(`Navigating to: ${path}`),
onToggleMinimized: () => console.log('Toggle sidebar'),
};
// Stories can be viewed in Storybook at Navigation/NavigationSidebar
```
The file sets up comprehensive testing scenarios for the sidebar component, including proper event handling, active state management, and realistic layout presentation within Storybook's documentation system.