set admin responsive

templates/admin/index.html.twig

@@ -4,10 +4,27 @@
 
 {% block content %}
     <div class="flex">
+
+        <!-- Bouton pour afficher la sidebar sur les petits écrans -->
+        <button id="sidebarToggle" class="lg:hidden p-4 text-white bg-gray-700 rounded">
+            &#9776; <!-- Symbole hamburger -->
+        </button>
+
+        <div id="sidebar" class="lg:block fixed inset-0 bg-gray-800 bg-opacity-75 z-50 hidden">
             {% include 'admin/sidebar.html.twig' %}
-        <div class="ml-64 p-8">
+        </div>
+
+        <div id="mainContent" class="flex-1 p-8 ml-64 lg:ml-0">
             <h1 class="text-2xl font-semibold">Bienvenue sur le Panel d'Administration</h1>
             <p class="text-gray-600 mt-4">Utilisez le menu pour accéder aux différentes sections.</p>
         </div>
     </div>
+    <script>
+        const sidebarToggle = document.getElementById('sidebarToggle');
+        const sidebar = document.getElementById('sidebar');
+
+        sidebarToggle.addEventListener('click', function () {
+            sidebar.classList.toggle('hidden'); // Bascule l'affichage de la sidebar
+        });
+    </script>
 {% endblock %}

templates/admin/site.html.twig

@@ -4,6 +4,7 @@
 
 {% block content %}
     <div class="flex">
+
         {% include 'admin/sidebar.html.twig' %}
 
         <!-- Main Content -->