{% extends 'main/base.html.twig' %}

{% block title %}📣 Sortie.com Admin 🔊{% endblock %}

{% 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>

        <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 %}