test responsive

css/styleMenu.css

@@ -144,10 +144,25 @@ body {
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
 }
 
-/* Pour ajuster la marge de la sidebar quand elle est affichée en mode mobile */
 @media (max-width: 991px) {
-    .sidebar {
+    /* Lorsque la sidebar est fermée, on conserve une largeur par défaut (ici 250px) */
+    #sidebar {
         width: 250px;
         height: 100%;
+        transition: width 0.3s ease;
+    }
+    /* Quand la sidebar est ouverte (classe "show" ajoutée par Bootstrap), elle occupe toute la fenêtre */
+    #sidebar.show {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        padding-top: 50px; /* Laisser de l'espace sous le bouton hamburger si nécessaire */
+        z-index: 1050;
+    }
+    /* Optionnel : masquer le contenu principal quand la sidebar est affichée */
+    .main-content {
+        display: none;
     }
 }