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

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

Véase también

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