# MinimalSidebar Component

A minimalist, responsive sidebar component for the Panadería IA application, inspired by grok.com's clean design.

## Features

- **Minimalist Design**: Clean, uncluttered interface following modern UI principles
- **Responsive**: Works on both desktop and mobile devices
- **Collapsible**: Can be collapsed on desktop to save space
- **Navigation Hierarchy**: Supports nested menu items with expand/collapse functionality
- **Profile Integration**: Includes user profile section with logout functionality
- **Theme Consistency**: Follows the application's global color palette and design system
- **Accessibility**: Proper ARIA labels and keyboard navigation support

## Usage

```tsx
import { MinimalSidebar } from './MinimalSidebar';

// Basic usage
<MinimalSidebar />

// With custom props
<MinimalSidebar
  isCollapsed={isSidebarCollapsed}
  onToggleCollapse={toggleSidebar}
  isOpen={isMobileMenuOpen}
  onClose={closeMobileMenu}
/>
```

## Props

| Prop | Type | Description |
|------|------|-------------|
| `className` | `string` | Additional CSS classes |
| `isOpen` | `boolean` | Whether the mobile drawer is open |
| `isCollapsed` | `boolean` | Whether the desktop sidebar is collapsed |
| `onClose` | `() => void` | Callback when sidebar is closed (mobile) |
| `onToggleCollapse` | `() => void` | Callback when collapse state changes (desktop) |
| `customItems` | `NavigationItem[]` | Custom navigation items |
| `showCollapseButton` | `boolean` | Whether to show the collapse button |
| `showFooter` | `boolean` | Whether to show the footer section |

## Design Principles

- **Minimalist Aesthetic**: Clean lines, ample whitespace, and focused content
- **Grok.com Inspired**: Follows the clean, functional design of grok.com
- **Consistent with Brand**: Uses the application's color palette and typography
- **Mobile First**: Responsive design that works well on all screen sizes
- **Performance Focused**: Lightweight implementation with minimal dependencies

## Color Palette

The component uses the application's global CSS variables for consistent theming:

- `--color-primary`: Primary brand color (orange)
- `--color-secondary`: Secondary brand color (green)
- `--bg-primary`: Main background color
- `--bg-secondary`: Secondary background color
- `--text-primary`: Primary text color
- `--text-secondary`: Secondary text color
- `--border-primary`: Primary border color

## Accessibility

- Proper ARIA attributes for screen readers
- Keyboard navigation support
- Focus management
- Semantic HTML structure