BottomNav — Barra de navegación inferior (mobile shell)

Descripción

BottomNav es el componente React de navegación principal para la vista mobile de CreaRack Pro. Se renderiza como una barra fija en la parte inferior de la pantalla, organizada en 5 grupos de primer nivel con soporte para submenús tipo dropup. Es el equivalente mobile de la sidebar desktop.

Ruta: src/components/shell/BottomNav.tsx

Estructura de datos

Tipos de ítem

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

interface NavDivider {
  divider: true;
  label: string;
}

type NavChild = NavLink | NavDivider;

interface NavItem {
  id: string;
  label: string;
  icon: ReactNode;
  href?: string;
  children?: NavChild[];
}

NavDivider (introducido en s60) permite añadir separadores visuales con etiqueta dentro de un dropup, sin que cuenten como rutas activas. El type guard isDivider(c: NavChild): c is NavDivider protege tanto la lógica de isActiveItem como el renderer del dropup.

Los 5 grupos

Grupo “Operaciones” tras s60

Pulse
Actividad
Worklog
Informes
Mantenimiento
── Herramientas ──   ← NavDivider
Hub /tools           → /tools
Cuaderno             → /tools/notebook
Quick Links          → /tools/quicklinks
Direcciones          → /tools/directions

Comportamiento

Detección de ruta activa

isActiveItem(item, path) determina si un NavItem está activo. Para ítems con children, itera sobre NavChild[] ignorando los divisores:

return item.children.some(
  (c) => !isDivider(c) && (path === c.href || path.startsWith(c.href + '/')),
);

Renderer del dropup

Cuando el dropup está abierto, children se mapea en orden. Al encontrar un NavDivider se renderiza un <div> con:

• borderTop: 1px solid var(--border-soft)
• textTransform: uppercase, letterSpacing: 0.8
• color: var(--fg-muted), fontSize: var(--text-sm), fontWeight: 700

El estilo es intencionalmente consistente con el SectionLabel del HOME mobile (V1HomeVivo).

Historial de cambios relevantes

Decisiones de diseño

• Diseño visual estable: s60 no modifica estilos del BottomNav (sticky, blur, iconos), solo añade funcionalidad.
• Divisor no-ruta: NavDivider no hereda de NavLink para que isActiveItem no pueda activarse sobre él. Romper el type system habría sido un bug silencioso.
• Consistencia con SectionLabel: la tipografía del divisor espeja SectionLabel del HOME mobile para coherencia visual.

Véase también

• [[entity—mobile—component—v1homevivo]]
• [[feature—mobile—s60-paridad-desktop]]