Concorde
BETA
Volver al catálogo
13

Sidebar — logo pegado al top y sin conteo de ítems

17 jul 2026
Producción
Producción — Sidebar — logo pegado al top y sin conteo de ítems
Concorde
Concorde — Sidebar — logo pegado al top y sin conteo de ítems

Qué está mal

Logo pegado al borde superior del sidebar.

Los ítems padre (Tipo de oferta, Categorías, Empresas) no muestran su conteo: el badge solo aparece en los subítems.

Cómo se corrige

Dar padding-top al header para separar el logo del top.

Renderizar el badge también en el ítem padre, no solo en subítems.

Código producción
// PROD — 1) HEADER: solo px-4, sin padding vertical → logo pegado al top
<div className="mx-auto flex h-14 items-center justify-between px-4">
  <a href="/" aria-label="Ir al inicio">
    <img src="/assets/brand/logo-voyager.svg" className="h-auto w-[120px]" />
  </a>
</div>

// 2) ÍTEM PADRE: no lleva badge de conteo
<button type="button" aria-label="Tipo de oferta">
  <span>Tipo de oferta</span>
  {/* ❌ sin badge */}
</button>

// el badge solo existe dentro del subítem:
<a href="/en-vivo.html">
  <span>En vivo</span>
  <span className="badge">5</span>
</a>
Código Concorde
// Concorde — 1) HEADER: pt-3 (padding-top) separa el logo del borde
<div className="mx-auto flex h-14 items-center justify-between px-4 pt-3">
  <a href="/" aria-label="Ir al inicio">
    <img src="/assets/brand/logo-voyager.svg" className="h-auto w-[120px]" />
  </a>
</div>

// 2) ÍTEM PADRE: el badge se emite en el propio ítem (padre incluido)
function SidebarItem({ label, count, isActive }) {
  return (
    <div className="sbi-item">
      <span className="sbi-label">{label}</span>
      {count != null && (
        <SidebarBadge count={count} active={isActive} />  // ✅
      )}
    </div>
  );
}

// dato por ítem:
{ label: "Tipo de oferta", count: 2 }