test responsive

css/styleMenu.css

@@ -144,36 +144,29 @@ body {
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
 }
 
-@media (max-width: 991px) {
-    /* Sidebar par défaut */
-    #sidebar {
-        width: 250px !important;
-        height: 100% !important;
-        transition: width 0.3s ease;
-    }
-    /* Sidebar déployée : prend toute la fenêtre */
-    #sidebar.show {
-        width: 100vw !important;
-        height: 100vh !important;
-        position: fixed !important;
-        top: 0 !important;
-        left: 0 !important;
-        padding-top: 50px !important;
-        z-index: 1050 !important;
-    }
-    /* Quand la sidebar est déployée, on cache le main content */
-    #sidebar.show ~ .main-content {
-        display: none !important;
-    }
-}
-
+/* Pour la sidebar, en mode mobile (quand elle est ouverte) */
 #sidebar {
-    width: 0;
-    transition: width 0.3s ease;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #00072D;
+    z-index: 1050; /* Assure que la sidebar sera au-dessus du contenu */
+    padding-top: 50px; /* Pour laisser de l'espace sous le bouton hamburger */
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
 }
 
-#sidebar.show {
-    width: 100vw !important;
+/* Pour ajuster la marge de la sidebar quand elle est affichée en mode mobile */
+@media (max-width: 991px) {
+    .sidebar {
+        width: 250px;
+        height: 100%;
+    }
+
+    .main-content {
+        display: none;
+    }
 }
 
 

menu.jsp

@@ -32,7 +32,7 @@
     </button>
 
     <!-- Sidebar (visible sur PC et cachée sur mobile) -->
-    <div class="sidebar collapse d-lg-block" id="sidebar">
+    <div class="sidebar collapse d-lg-block col-12 col-md-3" id="sidebar">
         <div class="d-flex align-items-center justify-content-between w-100">
             <a href="UserInfo" class="d-flex align-items-center gap-3 fs-4 text-decoration-none text-light">
                 <i class="bi bi-person"></i>
@@ -44,7 +44,7 @@
             </a>
         </div>
 
-        <div class="separator"></div>
+        <div class="border-top border-3 border-primary my-4"></div>
         <h3>Vos fils de discussion</h3>
         <div class="separator"></div>
 
@@ -171,15 +171,5 @@ if(isAdmin){
         }
     };
 </script>
-<script>
-    document.addEventListener('DOMContentLoaded', function () {
-        const sidebar = document.getElementById('sidebar');
-        const toggleButton = document.querySelector('.navbar-toggler');
-
-        toggleButton.addEventListener('click', function () {
-            sidebar.classList.toggle('show');
-        });
-    });
-</script>
 </body>
 </html>