Improve the production frontend

frontend/src/components/layout/MinimalSidebar/README.md

@@ -0,0 +1,70 @@
+# 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