From 3df42d65dd313e3540a1555c00af1ba680dcb08d Mon Sep 17 00:00:00 2001
From: Giorgio UTZERI <giorgio.utzeri.etu@univ-lille.fr>
Date: Sat, 15 Mar 2025 14:41:10 +0100
Subject: [PATCH] test responsive
---
css/styleMenu.css | 47 ++++++++++++++++++++---------------------------
menu.jsp | 14 ++------------
2 files changed, 22 insertions(+), 39 deletions(-)
diff --git a/css/styleMenu.css b/css/styleMenu.css
index 56ae806..2894011 100644
--- a/css/styleMenu.css
+++ b/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;
+ }
}
diff --git a/menu.jsp b/menu.jsp
index 8750a9a..214fde7 100644
--- a/menu.jsp
+++ b/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>
--
GitLab