Nueva navegación de USDX: TopNav unificada con sub-bar contextual y dropdowns en hover

USDX cambió toda la forma en que navegás la plataforma. El sidebar lateral que arrastrábamos desde la primera versión se fue. En su lugar quedó una TopNav unificada — una barra superior que vale para usuarios, merchants y admins por igual — más una sub-bar contextual que aparece debajo según la sección en la que estés.

Si pasaste por la plataforma esta semana ya lo viste. Acá va el porqué y los detalles que te ahorran tiempo.

Por qué nos fuimos del sidebar

El sidebar lateral nos servía cuando USDX tenía 6 pantallas. Hoy tenemos 60+ entre el área de usuario, el panel del merchant, el área de comercios, el admin interno y los flows transversales (referidos, configuración, soporte). El sidebar estaba creciendo en altura y ya no entraba sin scroll en notebooks chicos. Y peor: para los users que operan en mobile, el sidebar nunca estuvo del todo bien — ocupaba espacio de pantalla útil.

La TopNav superior:

• Es horizontal: aprovecha el ancho de la pantalla, que en desktop tenemos de sobra.

• Es igual para todos los roles: el código de la barra es uno solo (AppTopbar), las diferencias se manifiestan en qué links aparecen según permisos. Antes había tres componentes paralelos para usuario / merchant / admin con bugs de divergencia entre los tres.

• Es mobile-first compatible: en mobile se colapsa a un menú hamburguesa estándar. En desktop se expande horizontalmente.

Las secciones del top-level

Las cinco secciones principales de la TopNav son:

1. P2P — antes "Market P2P". Acortamos el nombre porque era redundante: ya estás en USDX, el market es P2P. Llevás a la pantalla de mercado abierto.

2. Dashboard — tu panel personal con portfolio, saldos consolidados, historial.

3. Comerciante — visible solo si tenés membership en al menos un merchant. Tiene su propia sub-bar (ver abajo).

4. Referidos — programa de referidos, link de afiliado, comisiones acumuladas.

5. Cuenta / Configuración — perfil, seguridad, métodos de login, notificaciones.

Para admins internos hay una sección adicional "Admin" que solo aparece si la cuenta tiene permisos de staff.

La sub-bar contextual

Acá está la parte interesante. Cuando entrás a una sección que tiene varias páginas relacionadas (por ejemplo "Comerciante"), aparece una segunda fila debajo de la TopNav con los links de esa sección:

• Dentro de Comerciante: P2P (avisos), Conexiones (exchanges), Saldos, Personal del equipo, Configuración del merchant, Logs.

• Dentro de Dashboard: Portfolio, Mis exchanges, Transacciones, Notificaciones.

• Dentro de P2P: All Markets, Compra, Venta, Mis órdenes, Disputas.

La sub-bar no aparece cuando estás en una sección que no la necesita (ej: "Cuenta" tiene una sola jerarquía de páginas y no requiere sub-bar — los links viven directamente como tabs internos de cada subpágina).

El comportamiento es sticky con scroll behavior: cuando bajás scroll, la sub-bar se colapsa para dar más espacio. Cuando volvés arriba, reaparece. Esto evita que la barra "coma" la altura disponible cuando estás leyendo tablas largas (típico en el panel de comerciante mirando histórico de avisos).

Dropdowns en hover, no en click

Antes los dropdowns (los menúes que despliegan opciones, como el de notificaciones o el del avatar de usuario) se abrían con click. Eso significaba: click para abrir, mover el mouse al ítem que querías, click de nuevo. Lentísimo si pasabas el día navegando.

Ahora se abren en hover: pasás el mouse por arriba y el dropdown aparece solo. Click solo cuando elegís un ítem. Esto se siente como un detalle pero baja la fricción de navegación de manera notable cuando hacés muchas acciones por día.

En mobile, donde no hay hover, sigue funcionando con tap (no había forma de hacerlo diferente). Pero en desktop el cambio es claro.

Detalle adicional: los dropdowns ya no tienen el background highlight que tenían antes en el botón "activo". Estéticamente quedó más limpio y menos ruidoso.

"Panel de comerciante" solo para users con membership

Antes "Comerciante" aparecía siempre, incluso para users que nunca fueron merchant — con un mensaje tipo "Sumate como merchant" que era ruido visual para el 90% de los users que no aplica. Ahora la sección solo se muestra si tu cuenta tiene al menos un merchant_membership activo, en cualquier rol (owner, manager, editor, operator, viewer).

Si nunca fuiste merchant pero querés serlo, hay un CTA en el Dashboard ("Convertirme en merchant") que te lleva al flow de aplicación. Pero no contamina la navegación principal.

"Market P2P" → "P2P"

Cambio chico pero comentado: el link del menú principal ahora dice "P2P" en lugar de "Market P2P". Razón: si ya estás dentro de USDX, está implícito que estamos hablando del mercado P2P. "Market" sobraba.

La URL sigue siendo /p2p como siempre. No rompemos bookmarks.

Qué se mantiene

• Las URLs no cambiaron. Tus bookmarks siguen funcionando.

• Las shortcuts de teclado (si las usabas) tampoco cambiaron.

• Los permisos siguen igual: si veías una sección antes, seguís viéndola ahora.

• La performance de la navegación es la misma (los componentes pesan parecido).

El cambio invisible: una sola fuente de verdad para la nav

Por debajo de todo, la TopNav consolidó tres componentes que existían en paralelo (uno para usuario, uno para merchant, uno para admin) en uno solo. Esto suena interno pero impacta en lo que ves: las inconsistencias de hover/active state/spacing entre las tres áreas — que arrastrábamos hace meses — desaparecen porque ya no hay tres implementaciones que pueden divergir, hay una.

Si encontrás bugs visuales o algo que se siente raro, escribínos a soporte. Es un cambio grande de UX y aunque hicimos QA exhaustivo, siempre hay edge cases en pantallas o navegadores específicos que se nos escapan.