diff --git a/menu.jsp b/menu.jsp index 1b802ff3e2b8f708aa8c979e177cecdac4978024..04b3320df0ebb5cdf12b677c7dcc990429e58ca0 100644 --- a/menu.jsp +++ b/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;"> <%