diff --git a/css/styleMenu.css b/css/styleMenu.css
index 06d36fed46ec32158370902e48c03a25e85d8208..56ae80609f8a592da638f31941044e14500dd5df 100644
--- a/css/styleMenu.css
+++ b/css/styleMenu.css
@@ -167,4 +167,13 @@ body {
     }
 }
 
+#sidebar {
+    width: 0;
+    transition: width 0.3s ease;
+}
+
+#sidebar.show {
+    width: 100vw !important;
+}
+
 
diff --git a/menu.jsp b/menu.jsp
index b461aaa04aaec06bcd2ea490b888504a43589015..8750a9ab0e32af0acb643150c06ca10c603a3567 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 col-12 col-md-3" id="sidebar">
+    <div class="sidebar collapse d-lg-block" 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>
@@ -171,5 +171,15 @@ 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>