@medicaresoft/appsidebar

Componente sidebar responsivo y moderno para aplicaciones Medicare.

📦 Instalación

npm install @medicaresoft/appsidebar

⚠️ Requisitos

Este componente requiere React 18+.

Importar estilos

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

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

O si prefieres importarlo en tu CSS:

/* En tu archivo CSS principal */
@import '@medicaresoft/appsidebar/styles';

🚀 Uso

Ejemplo básico

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

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:

<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