BottomNav — Componente de navegación inferior mobile

Descripción

BottomNav es un componente React (src/components/shell/BottomNav.tsx) que proporciona la barra de navegación inferior fija en dispositivos móviles (≤768 px). Reemplaza al sidebar y header desktop, que se ocultan mediante CSS en viewports pequeños.

El componente se monta en SecondaryLayout con client:load y también en V1HomeVivo (home mobile). Su visibilidad se controla exclusivamente por CSS (display:none por defecto; display:flex en @media (max-width: 768px)), sin lógica condicional en JS.

Estructura de ítems

ID	Label	Tipo	Destino / Children
`home`	Inicio	Link directo	`/`
`tareas`	Tareas	Dropup	Tareas, Notas, Noticias, Alertas
`ops`	Operaciones	Dropup	Pulse, Actividad, Worklog, Informes, Mantenimiento
`wiki`	Wiki	Dropup	CreaRack Help, CreaRack Tech, Workspace, Workspace Tech, IA Tech
`me`	Yo	Link directo	`/me` (404 pendiente)

Nota: El ítem “Tools” (AI Eval) fue eliminado del mobile por ser funcionalidad desktop-only.

Comportamiento

Dropups: Al pulsar un ítem con children, se abre un menú flotante (position: absolute, bottom: 100% + 8px) centrado sobre el botón. Solo puede haber un dropup abierto a la vez.
Cierre por click externo: Se registra un listener global click (con useRef al contenedor) que cierra el dropup activo al hacer clic fuera del nav.
Active state: Un ítem se marca como activo si window.location.pathname coincide con su href o con el href de cualquiera de sus children. El ítem home solo está activo en la ruta exacta /.
Safe-area: El padding inferior incluye env(safe-area-inset-bottom) para respetar el notch/home indicator en iOS.
Backdrop blur: Fondo semitransparente con backdrop-filter: blur(24px) usando el token --bg al 90% de opacidad.

CSS — Ocultamiento del shell desktop

src/styles/globals.css añade las reglas necesarias para que en mobile solo sea visible el BottomNav:

.bottom-nav { display: none; }

@media (max-width: 768px) {
  .app .header,
  .app .sidebar { display: none !important; }
  .app { height: 100dvh; }
  .app .body { flex-direction: column; }
  .app .main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .bottom-nav { display: flex; }
}

Integración en layouts

SecondaryLayout.astro: Monta <BottomNav client:load /> al final del .app, antes del cierre. Esto cubre todas las páginas internas de la aplicación.
V1HomeVivo.tsx: Importa y usa el componente compartido (antes tenía una implementación inline de ~70 LOC que fue eliminada).

Interfaces TypeScript

interface NavLink {
  label: string;
  href: string;
}

interface NavItem {
  id: string;
  label: string;
  icon: ReactNode;
  href?: string;         // presente en ítems de link directo
  children?: NavLink[];  // presente en ítems con dropup
}

Historial

Versión	Cambio
s37 (2026-04-28)	Extracción inicial desde `V1HomeVivo`. Reescritura con dropups, 5 ítems, active state por path.

Véase también

[[feature—mobile—shell-mobile-s37]]
[[entity—shell—layout—secondary-layout]]
[[entity—shell—component—v1-home-vivo]]
[[concept—ux—mobile-shell]]