test responsive

menu.jsp

@@ -27,16 +27,22 @@
         boolean isUserInFil = fils != null && !fils.isEmpty();
     %>
 
-    <div class="sidebar col-12 col-md-3">
+    <!-- Bouton hamburger visible sur mobile -->
+    <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <!-- Sidebar (visible sur PC et cachée sur mobile) -->
+    <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>
                 <span><%= utilisateur.getPrenom() + " " + utilisateur.getNom() %></span>
             </a>
 
-                <a href="LogoutServlet" class="text-danger fs-3">
-                    <i class="bi bi-box-arrow-right"></i>
-                </a>
+            <a href="LogoutServlet" class="text-danger fs-3">
+                <i class="bi bi-box-arrow-right"></i>
+            </a>
         </div>
 
         <div class="border-top border-3 border-primary my-4"></div>
@@ -57,21 +63,22 @@
             <% } %>
         </ul>
         <% } else { %>
-            <p>Aucun fil de discussion trouvé.</p>
+        <p>Aucun fil de discussion trouvé.</p>
         <% } %>
 
         <div class="separator"></div>
 
         <div class="mt-3 text-center">
             <a href="creerFil.html" class="btn btn-primary d-flex align-items-center gap-2 px-4 py-2">
-                <span class="d-inline-flex justify-content-center align-items-center border border-light rounded" style="width: 24px; height: 24px;">
-                    <i class="bi bi-plus-lg"></i>
-                </span>
+            <span class="d-inline-flex justify-content-center align-items-center border border-light rounded" style="width: 24px; height: 24px;">
+                <i class="bi bi-plus-lg"></i>
+            </span>
                 Ajouter un fil
             </a>
         </div>
     </div>
 
+
     <div class="main-content d-flex flex-column bg-image"
          style="min-height: 100vh; background-image: url('images/login-bg.png'); background-size: cover; background-position: center;">
         <%