đŸŒ± Menu

Burger Menu HTMX

Redimensionne ta fenĂȘtre pour voir le menu burger. đŸ“±

Le contenu du drawer est chargé à la demande via HTMX.

Comment ça marche ?

  1. 1 Au clic sur le burger, Alpine ouvre le drawer
  2. 2 HTMX charge le contenu via hx-get (une seule fois)
  3. 3 Le HTML est injecté et remplace le skeleton loader
  4. 4 Clic sur l'overlay ou ✕ pour fermer
🎹

Tailwind CSS

Transitions, drawer slide-in, overlay

⚡

Alpine.js

État open/close, animation burger icon

🔄

HTMX

hx-get, hx-trigger="intersect once"

Core Web Vitals

Field
Field data = conditions réelles (votre appareil).
Lighthouse = Lab data (CPU 4x ralenti, réseau 3G simulé).
Les valeurs Field sont généralement meilleures que Lighthouse.
LCP
Bon <2.5s Moyen <4s Mauvais
INP
Bon <200ms Moyen <500ms Mauvais
CLS
Bon <0.1 Moyen <0.25 Mauvais
FCP
TTFB
Lab ~ Estimation Lighthouse (CPU 4x)
LCP
INP
CLS
Score Field