npm package: @medicaresoft/appsidebar
Description: Componente sidebar responsivo para aplicaciones Medicare
Author: jose244
Latest version: 1.0.10

# @medicaresoft/appsidebar

Componente sidebar responsivo y moderno para aplicaciones Medicare.

## 📦 Instalación
```bash
npm install @medicaresoft/appsidebar
```

## ⚠️ Requisitos

Este componente requiere **React 18+**.

### Importar estilos

**Debes importar el CSS del componente en tu aplicación:**

```tsx
// En tu archivo principal (main.tsx o App.tsx)
import '@medicaresoft/appsidebar/styles';
```

O si prefieres importarlo en tu CSS:
```css
/* En tu archivo CSS principal */
@import '@medicaresoft/appsidebar/styles';
```

## 🚀 Uso

### Ejemplo básico
```tsx
import '@medicaresoft/appsidebar/styles'; // Importar estilos
import {
  SidebarLayout,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  Content,
  ContentHeader,
  ContentBody
} from '@medicaresoft/appsidebar';

function App() {
  return (
    <SidebarLayout>
      <Sidebar>
        <SidebarHeader icon={<span>✕</span>}>
          <h2>Mi Sidebar</h2>
        </SidebarHeader>
        
        <SidebarContent>
          <nav>
            <a href="/">Inicio</a>
            <a href="/about">Acerca</a>
          </nav>
        </SidebarContent>
        
        <SidebarFooter>
          <span>v1.0.0</span>
        </SidebarFooter>
      </Sidebar>

      <Content>
        <ContentHeader icon={<span>☰</span>}>
          <h1>Mi App</h1>
        </ContentHeader>
        
        <ContentBody>
          <p>Contenido principal</p>
        </ContentBody>
      </Content>
    </SidebarLayout>
  );
}
```

### Usar el hook para controlar el sidebar
```tsx
import { useSidebarContext } from '@medicaresoft/appsidebar';

function MyComponent() {
  const { toggleSidebar, isOpen, isMobile } = useSidebarContext();

  return (
    <button onClick={toggleSidebar}>
      {isOpen ? 'Cerrar' : 'Abrir'} Sidebar
    </button>
  );
}
```

## 📚 API

### `<SidebarLayout>`
Contenedor principal del layout.
- Props: `children: React.ReactNode`

### `<Sidebar>`
Componente del sidebar lateral.
- Props:
  - `children: React.ReactNode`
  - `backgroundColor?: string` - Color de fondo personalizado
  - `foregroundColor?: string` - Color de texto personalizado

### `<SidebarHeader>`
Cabecera del sidebar con botón de cierre en mobile.
- Props:
  - `children: React.ReactNode`
  - `icon: React.ReactNode` - Icono del botón de cierre

### `<SidebarContent>`
Área de contenido principal del sidebar con scroll.
- Props: `children: React.ReactNode`

### `<SidebarFooter>`
Footer del sidebar.
- Props: `children: React.ReactNode`

### `<Content>`
Contenedor del área de contenido principal.
- Props: `children: React.ReactNode`

### `<ContentHeader>`
Cabecera del contenido con botón de menú en mobile.
- Props:
  - `children: React.ReactNode`
  - `icon: React.ReactNode` - Icono del botón de menú
  - `backgroundColor?: string` - Color de fondo personalizado
  - `foregroundColor?: string` - Color de texto personalizado

### `<ContentBody>`
Área de contenido principal con scroll.
- Props: `children: React.ReactNode`

### `useSidebarContext()`
Hook para controlar el sidebar programáticamente.

Retorna:
- `isOpen: boolean` - Estado del sidebar
- `isMobile: boolean` - Si está en modo mobile
- `toggleSidebar: () => void` - Alternar estado
- `showSidebar: () => void` - Abrir sidebar
- `hideSidebar: () => void` - Cerrar sidebar

## 🎨 Personalización

Puedes personalizar colores mediante props:
```tsx
<Sidebar 
  backgroundColor="#1e3a8a" 
  foregroundColor="#ffffff"
>
  {/* contenido */}
</Sidebar>

<ContentHeader 
  backgroundColor="#f3f4f6"
  foregroundColor="#111827"
  icon={<MenuIcon />}
>
  <h1>Mi App</h1>
</ContentHeader>
```

O sobrescribir los estilos CSS importando tu propio CSS después de los estilos del componente.

## 📄 Licencia

MIT © jose244