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>