Test Menu Hamburger - Guide de Test

✨ Fonctionnalités Implémentées

🎯

Toggle Dynamique

Le menu s'ouvre et se ferme en cliquant sur le bouton hamburger

📱

Mode Mobile

Menu slide avec overlay semi-transparent

💻

Mode Desktop

Menu condensé/élargi selon les besoins

🔄

Animation Fluide

Rotation de l'icône et transitions CSS

🎨

Retour Visuel

Changement de couleur et rotation à 90°

🌓

Multi-Thèmes

Support thème clair et sombre

Test 1 : Mode Desktop (> 992px)

1 Ouvrir l'application sur un écran large

Utiliser un écran de largeur > 992px ou redimensionner la fenêtre du navigateur

2 Localiser le bouton hamburger

En haut à gauche de la navbar, juste après le logo

Le bouton doit être visible avec 3 lignes horizontales (☰)

3 Cliquer sur le bouton hamburger

L'icône tourne de 90°
Le fond du bouton change
Le menu se réduit (mode condensé)

4 Cliquer à nouveau sur le bouton

L'icône revient à sa position initiale
Le menu s'agrandit

Test 2 : Mode Mobile (≤ 992px)

1 Ouvrir DevTools

Appuyer sur F12 ou clic droit > Inspecter

2 Activer le mode responsive

Ctrl+Shift+M ou cliquer sur l'icône mobile dans DevTools

Largeur recommandée : 375px (iPhone) ou 768px (Tablette)

3 Vérifier l'état initial

Le menu latéral est caché
Seul le topbar est visible

4 Cliquer sur le bouton hamburger

Le menu slide depuis la gauche
Un overlay semi-transparent apparaît
L'icône tourne de 90°
Le reste de la page est légèrement assombri

5 Cliquer sur l'overlay (zone sombre)

Le menu se ferme
L'overlay disparaît
L'icône revient à sa position initiale

Test 3 : Navigation Automatique

1 En mode mobile, ouvrir le menu

Cliquer sur le bouton hamburger

2 Cliquer sur n'importe quel lien du menu

Par exemple : Dashboard, Users, Settings, etc.

La navigation se fait vers la nouvelle page
Le menu se ferme automatiquement
L'overlay disparaît

Test 4 : Redimensionnement Dynamique

1 Commencer en mode mobile

Fenêtre de largeur ≤ 992px

2 Ouvrir le menu mobile

Cliquer sur le bouton hamburger

3 Agrandir la fenêtre au-delà de 992px

Faire glisser le bord de la fenêtre pour l'élargir

Le menu mobile se ferme automatiquement
Le menu desktop s'affiche normalement
L'overlay disparaît

🔍 Vérification des Classes CSS

Ouvrir la console et inspecter l'élément <body> :

Mode Mobile Ouvert :
<body class="sidebar-enable">

Mode Desktop Condensé :
<body class="vertical-collpsed">

Mode Normal :
<body> (pas de classes spéciales)
                

🐛 Debugging Console

À chaque clic sur le bouton hamburger, un log apparaît dans la console :

Menu toggled: {
  isCondensed: true,
  isMobileView: true,
  bodyClasses: "sidebar-enable"
}
                

Pour voir ces logs :

Appuyer sur F12 pour ouvrir DevTools
Aller dans l'onglet "Console"
Cliquer sur le bouton hamburger
Observer les messages de log

⚠️ Problèmes Courants et Solutions

Le menu ne s'ouvre pas en mobile
→ Vérifier que la largeur est bien ≤ 992px
→ Inspecter la classe sidebar-enable sur le body
→ Vérifier la console pour les erreurs JavaScript

L'icône ne tourne pas
→ Vérifier que la classe active est bien appliquée au bouton
→ Vérifier que les styles CSS sont bien chargés
→ Nettoyer le cache du navigateur (Ctrl+Shift+Delete)

L'overlay ne s'affiche pas
→ Vérifier que vous êtes bien en mode mobile (≤ 992px)
→ Inspecter l'élément .sidebar-overlay dans DevTools
→ Vérifier le z-index (doit être 999)

📱 Devices Recommandés pour les Tests

📱

iPhone 12/13

390 x 844 px

📱

Galaxy S20

360 x 800 px

📱

iPad

768 x 1024 px

💻

Desktop

1920 x 1080 px

🌐 Navigateurs Testés

✅ Google Chrome (recommandé)
✅ Mozilla Firefox
✅ Microsoft Edge
✅ Safari (macOS/iOS)
✅ Opera

🎉 Checklist Finale

✅ Le bouton hamburger est visible

✅ Le menu s'ouvre en mode mobile

✅ L'overlay est cliquable et ferme le menu

✅ L'icône tourne de 90° à l'ouverture

✅ Le menu se ferme à la navigation

✅ Le redimensionnement est géré correctement

✅ Les logs de debug apparaissent dans la console

✅ Mode desktop fonctionne (menu condensé)

🍔 Guide de Test - Menu Hamburger