¿Qué es el componente SideBar?

El componente SideBar es una barra lateral vertical dividida en tres secciones: superior (top), central (middle) e inferior (bottom), con divisores opcionales.

¿Cómo se utiliza el componente SideBar?

Para usar el componente SideBar, importa la clase y configura sus propiedades:

import SideBarWidget, { SideBarWidgetStyle } from "@seigenta/TypesCraft/widgets/sideBar";
import { NavMenu, UserProfile } from "@seigenta/TypesCraft/widgets";
import { Color, Size } from "@seigenta/TypesCraft/widgets/utils";

// Uso básico
new SideBarWidget({
    topWidget: new NavMenu({ items: navItems }),
    middleWidget: new Text({ text: 'Contenido' }),
    bottomWidget: new UserProfile(),
    style: new SideBarWidgetStyle({
        backgroundColor: Color.hex("#ffffff"),
        width: Size.px(256)
    })
})
          

Propiedades del componente

El componente SideBar acepta las siguientes propiedades:

• topWidget?: (Widget) - Widget para la sección superior
• middleWidget?: (Widget) - Widget para la sección central
• bottomWidget?: (Widget) - Widget para la sección inferior
• dividerWidget?: (Widget) - Widget para los divisores entre secciones
• style?: (SideBarWidgetStyle) - Estilo del SideBar
• behaviors?: SideBarBehavior[] - Comportamientos especiales (ej: ocultar/mostrar)

SideBarWidgetStyle - Propiedades de estilo

El objeto SideBarWidgetStyle permite configurar:

• backgroundColor?: (Color) - Color de fondo
• width?: (Size) - Ancho del SideBar (default: 256px)
• elevate?: (Size) - Elevación (sombra)
• padding?: (EdgeSize) - Relleno interno
• transition?: (Transition) - Transiciones para animaciones
• css?: (Css) - Estilos CSS personalizados

Ejemplos de uso

Ejemplo básico con menú de navegación:

new SideBarWidget({
    topWidget: new NavMenu({ items: navItems }),
    middleWidget: new ScrollableList({ items: contentItems }),
    bottomWidget: new UserProfile(),
    style: new SideBarWidgetStyle({
        backgroundColor: Color.hex("#f8f9fa"),
        width: Size.px(280),
        elevate: Size.px(2)
    })
})
          

Ejemplo avanzado con divisor y transición:

new SideBarWidget({
    topWidget: new AppLogo(),
    middleWidget: new NavMenu({ items: navItems }),
    bottomWidget: new SettingsMenu(),
    dividerWidget: new Divider(),
    style: new SideBarWidgetStyle({
        backgroundColor: Color.hex("#ffffff"),
        width: Size.px(300),
        padding: EdgeSize.all(Size.px(12)),
        transition: new Transition({
            property: "width",
            duration: 300,
            timingFunction: TimingFunction.easeInOut
        })
    }),
    behaviors: [new HiddenSideBar(false)]
})
          

Comportamiento

El componente SideBar:

• Organiza el contenido en 3 secciones verticales (top, middle, bottom)
• Muestra divisores opcionales entre secciones cuando existen ambas
• Soporta sombras y transiciones animadas
• Permite comportamientos personalizados como ocultar/mostrar
• Genera estilos CSS eficientes reutilizables