Sidebar — burger/iconos y top no alineados con el contenido

17 jul 2026

Producción

Concorde

Qué está mal

La hamburguesa (☰) del header no queda alineada con la columna de iconos del sidebar colapsado: caen en ejes X distintos.

El borde superior del marco del sidebar no coincide con el top del contenido/banner de la derecha.

Cómo se corrige

Alinear el centro de la hamburguesa con la columna de iconos: paddingLeft del header = 20 + medio botón (18) = 38px, mismo centro que el icono colapsado.

Pasar al sidebar el mismo headerHeight del contenido para que el top del marco arranque a la misma altura.

Código producción

// PROD — header con su propio padding, sin coordinar con el sidebar
<div className="mx-auto flex h-14 items-center px-4">
  <label className="h-10 w-10 ...">☰</label>   {/* burger a la izquierda del header */}
  <img src="/logo-voyager.svg" />
</div>

// el sidebar arranca en top:0 con su propio alto de cabecera,
// sin recibir el height del contenido → top desalineado
<aside className="absolute inset-y-0 left-0">
  <nav>…iconos…</nav>
</aside>

Código Concorde

ver código Concorde

// Concorde — 1) burger centrada sobre la columna de iconos (SidebarHeader.tsx)
<div
  data-slot="sidebar-header"
  style={{
    height: headerHeight,
    paddingLeft: 20,   // 20 + medio botón (18) = centro 38px = icono colapsado
    paddingRight: 14,
  }}
>
  <button className="psb-toggle">☰</button>
  <div className="sbh-logo">{logo}</div>
</div>

// 2) el Sidebar recibe headerHeight del contenido → top alineado (Sidebar.tsx)
<Sidebar
  height={canvasHeight}
  headerHeight={HEADER_HEIGHT * scale}   // mismo top que el contenido
/>