08/Estructura

Layout de dashboard

Sidebar fija, topbar y área de contenido. En móvil la sidebar se vuelve un panel lateral.

Estructura

Mira la plantilla completa en examples/dashboard.html.

Resumen

Q 48kVentas del mes

312Pedidos

HTML

<div class="cb-dash">
  <aside class="cb-dash__sidebar" id="sidebar" data-cb-dash-sidebar aria-label="Menú del panel">
    <a href="#" class="cb-logo cb-dash__brand">...</a>
    <nav class="cb-dash__nav">
      <div class="cb-dash__group">
        <p class="cb-dash__group-title">General</p>
        <a class="cb-dash__link" href="#" aria-current="page">Resumen</a>
      </div>
    </nav>
  </aside>
  <div class="cb-dash__scrim" data-cb-dash-scrim="sidebar"></div>
  <div class="cb-dash__main">
    <header class="cb-dash__topbar">
      <button class="cb-icon-btn cb-dash__toggle" type="button" data-cb-dash-toggle="sidebar" aria-label="Menú">...</button>
      <div class="cb-dash__topbar-actions">...</div>
    </header>
    <main class="cb-dash__content">...</main>
  </div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-dash`	Grilla sidebar + contenido. El ancho se cambia con `--cb-dash-sidebar`.
`.cb-dash__sidebar`	Columna fija. Por debajo de 960px es un panel fuera de pantalla.
`.cb-dash__scrim`	Fondo oscuro detrás de la sidebar en móvil.
`.cb-dash__link`	Enlace con icono; `aria-current="page"` marca la línea de acento.
`.cb-dash__topbar`	Barra superior fija del contenido.
`.cb-dash__toggle`	Botón visible solo en móvil.
`.cb-dash__content`, `.cb-dash__header`, `.cb-dash__title`	Área principal y su encabezado.
`.cb-panel`, `.cb-panel__head`, `.cb-panel__body`	Caja con borde para agrupar contenido.

Atributos data-cb-*

Atributo	Descripción
`data-cb-dash-sidebar`	Marca la sidebar. Necesita `id`.
`data-cb-dash-toggle="id"`	Botón que la abre en móvil.
`data-cb-dash-scrim="id"`	Fondo que la cierra al hacer clic.

JavaScript

Evento	Cuándo se dispara
`cb:open` / `cb:close`	En la sidebar al abrirse o cerrarse en móvil.

Accesibilidad

En móvil la sidebar atrapa el foco y se cierra con Esc.
Usa main para el contenido y aria-label en la sidebar.