CreaRack-SL

Mobile Shell s37 — BottomNav reutilizable + ocultamiento sidebar desktop (Bloques E+F)

Vista limpiaEditar
Funcionalidadactivecreado Tue Apr 28#mobile#shell#navigation#ux#responsive#astro#react#mobile-review-s37

Resumen

Sesión 37 del Mobile Review. Implementa los Bloques E y F del plan de adaptación mobile de CreaRack Pro Workspace: extracción del componente BottomNav a un módulo compartido, reescritura completa con soporte de dropups y 5 secciones, e integración del ocultamiento del shell desktop en todas las páginas internas mediante SecondaryLayout.

Commit: e31945f87cc43379cdfef6ec36a4a2c974d5d931 (2026-04-28, @Esquembri)
Build: astro build verde — 327 páginas.

Bloque E — Sidebar fuera en páginas internas

Antes de este cambio, las páginas servidas por SecondaryLayout mostraban el header + sidebar completo en mobile, sin ninguna alternativa de navegación. La home (index.astro) ya gestionaba su propio modo mobile (conmutando a MobileApp/V1HomeVivo), pero el resto de la app carecía de soporte.

Cambios implementados:

  1. BottomNav extraído como componente standalone (src/components/shell/BottomNav.tsx), con clase CSS bottom-nav.
  2. SecondaryLayout.astro monta <BottomNav client:load /> al final del bloque .app.
  3. globals.css añade bloque @media (max-width: 768px) que:
    • Oculta .header y .sidebar con display: none !important.
    • Establece height: 100dvh en .app y flex-direction: column en .body.
    • Añade padding-bottom: calc(72px + env(safe-area-inset-bottom)) a .main para que el contenido no quede tapado por el BottomNav fijo.
    • Muestra .bottom-nav con display: flex.
  4. V1HomeVivo sustituye su BottomNav inline (~70 LOC) por import del componente compartido, con ganancia neta de -120 LOC.

Bloque F — Reescritura BottomNav (5 ítems, dropups)

La versión anterior (incrustada en V1HomeVivo) tenía 5 ítems de link directo y estado tab gestionado por el padre. La nueva versión es autónoma y añade:

Ítems y dropups

ÍtemTipoLinks incluidos
InicioLink directo/
TareasDropup/tasks, /notes, /news, /alerts/admin
OperacionesDropup/biblioteca/pulse, /activity, /worklog, /reports, /maintenance
WikiDropup5 wikis del workspace
YoLink directo/me

Tools (AI Eval) eliminado — es funcionalidad desktop-only.

Mejoras UX

  • Solo un dropup abierto a la vez: al abrir uno nuevo se cierra el anterior.
  • Click fuera cierra: listener global en window con referencia al contenedor navRef.
  • Active state inteligente: activo si el path coincide con el href propio o con el href de cualquier child. La home solo es activa en / exacto.
  • Safe-area: env(safe-area-inset-bottom) en padding para iOS.
  • Accesibilidad mínima: role="menu" en el contenedor del dropup, role="menuitem" en cada enlace, aria-haspopup="menu" y aria-expanded en el botón trigger.

Archivos modificados

ArchivoTipoLOC Δ
src/components/shell/BottomNav.tsxAñadido+258
src/components/variants/mobile/V1HomeVivo.tsxModificado−120
src/layouts/SecondaryLayout.astroModificado+3
src/styles/globals.cssModificado+19

Pendientes conocidos

  • /me (ítem “Yo”) actualmente devuelve 404. Se resolverá en sesión futura.
  • Active state solo se calcula en useEffect con window.location.pathname (sin reactividad a navegación SPA si la hubiese).
  • Los dropups no tienen animación de entrada/salida.

Véase también

  • [[entity—shell—component—bottom-nav]]
  • [[entity—shell—layout—secondary-layout]]
  • [[entity—shell—component—v1-home-vivo]]
  • [[concept—ux—mobile-shell]]

Referenciado desde

Inicio
Yo