From ebd40ee5e0865c43a8781def2695801e6b08b758 Mon Sep 17 00:00:00 2001
From: Giorgio UTZERI <giorgio.utzeri.etu@univ-lille.fr>
Date: Sat, 15 Mar 2025 14:22:15 +0100
Subject: [PATCH] test responsive
---
css/styleMenu.css | 52 +++++++++----------------------
menu.jsp | 78 +++++++++++++++++++++++------------------------
2 files changed, 52 insertions(+), 78 deletions(-)
diff --git a/css/styleMenu.css b/css/styleMenu.css
index 30c33ee..f312ac1 100644
--- a/css/styleMenu.css
+++ b/css/styleMenu.css
@@ -131,47 +131,23 @@ body {
text-decoration: none;
}
-/* La sidebar sur mobile */
-@media (max-width: 991px) {
- /* Par défaut, la sidebar est cachée */
- .sidebar {
- display: none; /* Cacher la sidebar */
- }
-
- /* 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 */
- }
+/* Pour la sidebar, en mode mobile (quand elle est ouverte) */
+#sidebar {
+ 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);
}
-/* Sur grand écran, afficher la sidebar normalement */
-@media (min-width: 992px) {
+/* Pour ajuster la marge de la sidebar quand elle est affichée en mode mobile */
+@media (max-width: 991px) {
.sidebar {
- display: block;
width: 250px;
- background-color: #00072D;
- padding: 20px;
- }
-
- .main-content {
- margin-left: 250px; /* Décalage pour la sidebar */
+ height: 100%;
}
}
diff --git a/menu.jsp b/menu.jsp
index 0448a4f..b8fea4b 100644
--- a/menu.jsp
+++ b/menu.jsp
@@ -28,55 +28,53 @@
%>
<!-- Bouton hamburger visible sur mobile -->
- <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">
+ <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>
- <!-- 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>
+ <!-- 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>
+ <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>
+ <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>
+ <% 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>
+ <% } %>
- <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>
+ <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>
--
GitLab