Sidebar — la sección no se queda seleccionada en naranja

17 jul 2026

Producción

ConcordeInteractivoabrir bloque

Qué está mal

En Producción, al hacer click en una subsección el ítem no se queda en naranja (estado seleccionado): el naranja solo aparece mientras está presionado y se pierde al soltar.

En Concorde el ítem sí conserva el estado seleccionado (naranja) tras el click.

Cómo se corrige

Guardar el ítem activo en estado y aplicarle el estilo naranja de forma persistente, no solo en :active.

Pruébalo en el iframe de al lado: al pulsar un ítem se queda seleccionado en naranja.

Código producción

// PROD — el naranja solo existe en :active (mientras se presiona)
<a className="… active:bg-[linear-gradient(to_bottom,#ff9639,#ef852e,#be3d00)]
              active:text-white">
  {/* al soltar el click, vuelve al estado por defecto → no se queda naranja */}
</a>

Código Concorde

ver código Concorde

// Concorde — el ítem activo se guarda en estado y conserva el naranja
const [activeId, setActiveId] = useState(defaultActiveId);

<SidebarItem
  isActive={activeId === item.id}       // ← selección persistente
  onClick={handleItemClick}             // setActiveId(id)
/>

/* estilo del seleccionado (no depende de :active) */
.sbi-item--active {
  background: linear-gradient(180deg, #FF9639 0%, #EF852E 40%, #BE3D00 100%);
}
.sbi-item--active .sbi-label { color: #FFFFFF; }
// → tras el click el ítem se queda seleccionado en naranja. Compruébalo en el iframe.