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

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.

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:

BottomNav extraído como componente standalone (src/components/shell/BottomNav.tsx), con clase CSS bottom-nav.
SecondaryLayout.astro monta <BottomNav client:load /> al final del bloque .app.
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.
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

Ítem	Tipo	Links incluidos
Inicio	Link directo	`/`
Tareas	Dropup	`/tasks`, `/notes`, `/news`, `/alerts/admin`
Operaciones	Dropup	`/biblioteca/pulse`, `/activity`, `/worklog`, `/reports`, `/maintenance`
Wiki	Dropup	5 wikis del workspace
Yo	Link 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

Archivo	Tipo	LOC Δ
`src/components/shell/BottomNav.tsx`	Añadido	+258
`src/components/variants/mobile/V1HomeVivo.tsx`	Modificado	−120
`src/layouts/SecondaryLayout.astro`	Modificado	+3
`src/styles/globals.css`	Modificado	+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]]