Navigation Menu

Menú hamburguesa amb navegació de temes, persistència entre sessions i interfície responsive.

Menú Hamburguesa Interactiu

Fes clic al menú hamburguesa a la capçalera per accedir a totes les opcions de temes. El tema seleccionat es mantindrà entre sessions.

Menú de Navegació

Aquest és el component NavigationMenu que inclou totes les opcions de temes disponibles i persisteix la selecció de l'usuari.

Funcionalitats

Accés a tots els temes disponibles: light, dark, iberia, iberia-dark, fluight-light, fluight-dark, etc.

El tema seleccionat es guarda al localStorage i es restaura automàticament entre sessions.

El menú s'adapta perfectament a pantalles mòbils amb overlay i animacions suaus.

Navegació per teclat completa, ARIA labels i suport per screen readers.

Animacions suaus, efectes hover i feedback visual per millorar l'experiència d'usuari.

Carrega ràpida, lazy loading dels temes i optimitzat per a dispositius mòbils.

Característiques Tècniques

  • Gestió d'estat: useState per controlar l'obertura del menú i sections expandides
  • Event handlers: Click outside, Escape key, keyboard navigation
  • Persistència: localStorage per guardar el tema seleccionat
  • Animacions: CSS transitions per overlay, panel i icones
  • Responsive: Breakpoints i layout adaptatiu per mòbils
  • Accessibilitat: ARIA attributes, keyboard navigation, screen reader support

Ús del Component

import { NavigationMenu } from '../app-components/NavigationMenu';

// Ús bàsic
<NavigationMenu />

// Amb className personalitzat
<NavigationMenu className="custom-menu" />

// En un header personalitzat
<Header>
  <NavigationMenu />
  <Title>La meva aplicació</Title>
  <ThemeToggle />
</Header>

Integració amb ThemeProvider

El NavigationMenu s'integra automàticament amb el ThemeProvider per:

  • Detectar el tema actual i mostrar-lo com a seleccionat
  • Canviar el tema quan l'usuari selecciona una nova opció
  • Persistir la selecció utilitzant localStorage
  • Aplicar automàticament les variables CSS del tema seleccionat
// El NavigationMenu utilitza:
const { mode, setMode } = useTheme();

// Per persistir el tema
useEffect(() => {
  localStorage.setItem('fluight-app-theme', mode);
}, [mode]);

// Per carregar el tema guardat
useEffect(() => {
  const savedTheme = localStorage.getItem('fluight-app-theme');
  if (savedTheme && savedTheme in extendedThemes) {
    setMode(savedTheme as ThemeMode);
  }
}, [setMode]);