diff --git a/css/styleMenu.css b/css/styleMenu.css
index 75b376a625a4f31987ded6eef76859f90c81645a..30c33eedb150bd256025888bfddaed389fefaa50 100644
--- a/css/styleMenu.css
+++ b/css/styleMenu.css
@@ -131,12 +131,47 @@ body {
text-decoration: none;
}
+/* La sidebar sur mobile */
@media (max-width: 991px) {
+ /* Par défaut, la sidebar est cachée */
.sidebar {
- width: 0; /* Cache la sidebar par défaut sur mobile */
+ display: none; /* Cacher la sidebar */
}
- .sidebar.collapse.show {
- width: 250px; /* Définit la largeur de la sidebar ouverte sur mobile */
+ /* Quand la sidebar est affichée, c'est-à-dire quand le menu est ouvert */
+ .navbar-collapse.show {
+ display: block;
+ }
+
+ /* Optionnel : styliser la navbar mobile */
+ .navbar-collapse {
+ background-color: #00072D;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 100vw;
+ z-index: 1050;
+ padding: 20px;
+ transition: all 0.3s ease-in-out;
+ }
+
+ /* Masquer le reste du contenu lorsque la navbar est ouverte */
+ .main-content {
+ display: none; /* Cacher les messages et autres éléments */
+ }
+}
+
+/* Sur grand écran, afficher la sidebar normalement */
+@media (min-width: 992px) {
+ .sidebar {
+ display: block;
+ width: 250px;
+ background-color: #00072D;
+ padding: 20px;
+ }
+
+ .main-content {
+ margin-left: 250px; /* Décalage pour la sidebar */
}
}
diff --git a/menu.jsp b/menu.jsp
index e4ef073ca1032a9badb71ac5d6f017e9358ec4f8..0448a4f15db99edda9d54de52e1a2719129caa61 100644
--- a/menu.jsp
+++ b/menu.jsp
@@ -12,7 +12,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LilleConnect</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styleMenu.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link href="css/styleMenu2.css" rel="stylesheet">
@@ -29,58 +28,58 @@
%>
<!-- 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">
+ <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" 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>
- </div>
-
- <div class="border-top border-3 border-primary my-4"></div>
- <h3>Vos fils de discussion</h3>
- <div class="separator"></div>
-
- <% if (isUserInFil) { %>
- <ul class="list-group">
- <% for (Fil fil : fils) { %>
- <li class="list-group-item d-flex justify-content-center align-items-center text-white border-0" style="background-color: #00072D;">
- <a href="Menu?filId=<%= fil.getFid() %>" class="gap-2 px-5 py-2">
- <%= fil.getTitre() %>
+ <!-- Navbar mobile (visible quand on clique sur le hamburger) -->
+ <div class="collapse navbar-collapse d-lg-none" id="navbarMenu">
+ <div class="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="LeaveFil?filId=<%= fil.getFid() %>" class="text-danger fs-3">
+
+ <a href="LogoutServlet" class="text-danger fs-3">
<i class="bi bi-box-arrow-right"></i>
</a>
- </li>
+ </div>
+
+ <div class="border-top border-3 border-primary my-4"></div>
+ <h3>Vos fils de discussion</h3>
+ <div class="separator"></div>
+
+ <% if (isUserInFil) { %>
+ <ul class="list-group">
+ <% for (Fil fil : fils) { %>
+ <li class="list-group-item d-flex justify-content-center align-items-center text-white border-0" style="background-color: #00072D;">
+ <a href="Menu?filId=<%= fil.getFid() %>" class="gap-2 px-5 py-2">
+ <%= fil.getTitre() %>
+ </a>
+ <a href="LeaveFil?filId=<%= fil.getFid() %>" class="text-danger fs-3">
+ <i class="bi bi-box-arrow-right"></i>
+ </a>
+ </li>
+ <% } %>
+ </ul>
+ <% } else { %>
+ <p>Aucun fil de discussion trouvé.</p>
<% } %>
- </ul>
- <% } else { %>
- <p>Aucun fil de discussion trouvé.</p>
- <% } %>
- <div class="separator"></div>
+ <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>
- Ajouter un fil
- </a>
+ <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>
+ Ajouter un fil
+ </a>
+ </div>
</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;">
<%
@@ -175,7 +174,5 @@ if(isAdmin){
}
};
</script>
-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0-alpha1/js/bootstrap.min.js"></script>
</body>
</html>