Sidebar

Riel de navegación del app shell — ancho fijo (o collapsedWidth cuando está collapsed, animado entre ambos), ocupa el alto de su contenedor, fondo color.surface.background (el fondo base de la app, un paso más oscuro que surface.background-secondary para que la píldora seleccionada de OrbitNavItem siga leyéndose contra él) y borde de 1px en color.surface.border-strong en el borde derecho.

Tres slots libres, apilados de arriba a abajo, ninguno impuesto: header (logo, nombre del producto, selector de workspace), el contenido principal — donde van los OrbitNavItem/OrbitNavGroup, el único que scrollea — y footer (fila de perfil, cerrar sesión — fijo abajo, nunca se va con el scroll del contenido; recibe un OrbitDivider arriba automáticamente en cuanto tiene algo). No trae un toggle de colapso propio — quien lo necesite lo ubica dentro de header, ya que dónde va varía demasiado por producto.

selectedId/onSelect son opcionales: este riel se los pasa por contexto a cualquier OrbitNavGroup que tenga dentro (ver esa página), para no repetirlos en cada grupo cuando comparten una sola selección.

Para armar un layout de app completo que además se adapte solo (rail fijo → colapsado a íconos → drawer, según el ancho disponible), ver OrbitAppShell, que arma este componente por vos.

Uso

DragBuilder

Workspace

Web

<orbit-sidebar>
  <div slot="header">...</div>
  <orbit-nav-item label="Pantallas" icon="grid" selected></orbit-nav-item>
  <orbit-nav-item label="Componentes" icon="clipboard"></orbit-nav-item>
  <orbit-nav-item label="Exportar" icon="upload-cloud"></orbit-nav-item>
  <div slot="footer">
    <orbit-nav-item label="Ajustes" icon="sliders"></orbit-nav-item>
  </div>
</orbit-sidebar>

Compose Multiplatform

OrbitSidebar(
    header = {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(8.dp),
        ) {
            Box(
                Modifier
                    .size(32.dp)
                    .clip(RoundedCornerShape(8.dp))
                    .background(Color(DesignTokens.colorPrimary500)),
            )
            Column {
                Text("DragBuilder", fontWeight = FontWeight.Bold)
                Text(
                    "Workspace",
                    color = Color(DesignTokens.colorTextSecondary),
                    fontSize = 12.sp,
                )
            }
        }
    },
    footer = {
        OrbitNavItem(label = "Ajustes", icon = OrbitIcon.Sliders, selected = false, onClick = {})
    },
) {
    OrbitNavItem(
        label = "Pantallas",
        icon = OrbitIcon.Grid,
        selected = true,
        onClick = {},
    )
    OrbitNavItem(
        label = "Componentes",
        icon = OrbitIcon.Clipboard,
        selected = false,
        onClick = {},
    )
    OrbitNavItem(
        label = "Exportar",
        icon = OrbitIcon.UploadCloud,
        selected = false,
        onClick = {},
    )
}

Props

Prop	Tipo	Default	Descripción
header (Kotlin) / slot header (web)	slot	null	Contenido libre arriba de los nav items.
content (Kotlin) / children (web)	slot	—	Las OrbitNavItem/OrbitNavGroup de la navegación; el único slot con scroll.
footer (Kotlin) / slot footer (web)	slot	null	Contenido libre fijo abajo, con un OrbitDivider arriba en cuanto tiene algo.
width (Kotlin) / attr width (web)	Dp / css length	240.dp / "240px"	Ancho del sidebar expandido.
collapsedWidth (Kotlin) / custom property --sidebar-collapsed-width (web)	Dp / css length	60.dp / 60px	Ancho en modo colapsado.
collapsed / attr collapsed	Boolean	false	Colapsa a modo ícono-solo (label oculta, animado). Se propaga a cada OrbitNavItem/OrbitNavGroup hijo.
selectedId / onSelect	String? / (String) -> Unit	null / no-op	Compartidos automáticamente con cualquier OrbitNavGroup hijo — ver esa página.