<el-dialog>
  <dialog id="sidebar" class="backdrop:bg-transparent lg:hidden">
    <el-dialog-backdrop
      class="fixed inset-0 bg-gray-900/80 transition-opacity duration-300 ease-linear data-closed:opacity-0"
    ></el-dialog-backdrop>

    <div tabindex="0" class="fixed inset-0 flex focus:outline-none">
      <el-dialog-panel
        class="group/dialog-panel relative mr-16 flex w-full max-w-xs flex-1 transform transition duration-300 ease-in-out data-closed:-translate-x-full"
      >
        <div
          class="absolute top-0 left-full flex w-16 justify-center pt-5 duration-300 ease-in-out group-data-closed/dialog-panel:opacity-0"
        >
          <button
            type="button"
            command="close"
            commandfor="sidebar"
            class="-m-2.5 p-2.5"
          >
            <span class="sr-only">Fermer sidebar</span>
            <svg
              viewbox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              data-slot="icon"
              aria-hidden="true"
              class="size-6 text-white"
            >
              <path
                d="M6 18 18 6M6 6l12 12"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </button>
        </div>

        <!-- Sidebar component, swap this element with another sidebar if you like -->
        <div
          class="relative flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-2"
        >
          <div class="relative flex h-16 shrink-0 items-center">
            <img src="/images/logo.jpg" alt="Your Company" class="h-8 w-auto" />
          </div>
          <nav class="relative flex flex-1 flex-col">
            <ul role="list" class="flex flex-1 flex-col gap-y-7">
              <li>
                <ul role="list" class="-mx-2 space-y-1">
                  <li>
                    <!-- Current: "bg-gray-50 text-amber-600", Default: "text-gray-700 hover:text-amber-600 hover:bg-gray-50" -->
                    <a
                      href="{{ path('admin_dashboard') }}"
                      class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold{% if path == '/admin' %} bg-gray-50 text-amber-600 {% else %} text-gray-700 hover:text-amber-600 hover:bg-gray-50 {% endif %}"
                    >
                      <svg
                        viewbox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.5"
                        data-slot="icon"
                        aria-hidden="true"
                        class="size-6 shrink-0{% if path == '/admin' %} text-amber-600 {% else %} text-gray-400 group-hover:text-amber-600{% endif %}"
                      >
                        <path
                          d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>Tableau de bord
                    </a>
                  </li>
                  <li>
                    <a
                      href="{{ path('admin_news_index') }}"
                      class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold {% if path starts with '/admin/news' %} bg-gray-50 text-amber-600 {% else %} text-gray-700 hover:text-amber-600 hover:bg-gray-50 {% endif %}"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewbox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="size-6 shrink-0 {% if path starts with '/admin/news' %} text-amber-600 {% else %} text-gray-400 group-hover:text-amber-600{% endif %}"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"
                        />
                      </svg>Actualité
                    </a>
                  </li>
                  <li>
                    <a
                      href="{{ path('admin_image_index') }}"
                      class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold {% if path starts with '/admin/image' %} bg-gray-50 text-amber-600 {% else %} text-gray-700 hover:text-amber-600 hover:bg-gray-50 {% endif %}"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewbox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="size-6 shrink-0 {% if path starts with '/admin/image' %} text-amber-600 {% else %} text-gray-400 group-hover:text-amber-600{% endif %}"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
                        />
                      </svg>Image
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <div class="text-xs/6 font-semibold text-gray-400">
                  Liens utiles
                </div>
                <ul role="list" class="-mx-2 mt-2 space-y-1">
                  <li>
                    <a
                      target="_blank"
                      href="{{ path('home') }}"
                      class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold 0 text-gray-700 hover:bg-gray-50 hover:text-amber-600"
                    >
                      <span
                        class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-amber-600 group-hover:text-amber-600"
                      >
                        A
                      </span>
                      <span class="truncate">Accès au site</span>
                    </a>
                  </li>
                  <li>
                    <a
                      target="_blank"
                      href="/logout"
                      class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold 0 text-gray-700 hover:bg-gray-50 hover:text-amber-600"
                    >
                      <span
                        class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-amber-600 group-hover:text-amber-600"
                      >
                        D
                      </span>
                      <span class="truncate">Déconnexion</span>
                    </a>
                  </li>
                </ul>
              </li>

              {% if 'ROLE_DEVELOPER' in app.user.roles %}
                <li>
                  <div class="text-xs/6 font-semibold text-gray-400">
                    Développeur
                  </div>
                  <ul role="list" class="-mx-2 mt-2 space-y-1">
                    <li>
                      <!-- Current: "bg-gray-50 text-amber-600", Default: "text-gray-700 hover:text-amber-600 hover:bg-gray-50" -->
                      <a
                        href="{{ path('admin_feature_index') }}"
                        class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold 0{% if path starts with '/admin/feature' %} bg-gray-50 text-amber-600 {% else %} text-gray-700 hover:bg-gray-50 hover:text-amber-600{% endif %}"
                      >
                        <span
                          class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium {% if path starts with '/admin/feature' %} border-amber-600 text-amber-600 {% else %} text-gray-400 group-hover:border-amber-600 group-hover:text-amber-600{% endif %}"
                        >
                          F
                        </span>
                        <span class="truncate">Fonctionnalité</span>
                      </a>
                    </li>
                  </ul>
                </li>
              {% endif %}
            </ul>
          </nav>
        </div>
      </el-dialog-panel>
    </div>
  </dialog>
</el-dialog>

<!-- Static sidebar for desktop -->
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
  <!-- Sidebar component, swap this element with another sidebar if you like -->
  <div
    class="relative flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6"
  >
    <div class="relative flex h-16 shrink-0 items-center">
      <img src="/images/logo.jpg" alt="Your Company" class="h-8 w-auto" />
    </div>
    <nav class="relative flex flex-1 flex-col">
      <ul role="list" class="flex flex-1 flex-col gap-y-7">
        <li>
          <ul role="list" class="-mx-2 space-y-1">
            <li>
              <!-- Current: "bg-gray-50 text-amber-600", Default: "text-gray-700 hover:text-amber-600 hover:bg-gray-50" -->
              <a
                href="{{ path('admin_dashboard') }}"
                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold {% if path == '/admin' %} bg-gray-50 text-amber-600 {% else %} text-gray-700 hover:text-amber-600 hover:bg-gray-50 {% endif %}"
              >
                <svg
                  viewbox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1.5"
                  data-slot="icon"
                  aria-hidden="true"
                  class="size-6 shrink-0 {% if path == '/admin' %} text-amber-600 {% else %} text-gray-400 group-hover:text-amber-600{% endif %}"
                >
                  <path
                    d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>Tableau de bord
              </a>
            </li>
            <li>
              <a
                href="{{ path('admin_news_index') }}"
                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold {% if path starts with '/admin/news' %} bg-gray-50 text-amber-600 {% else %} text-gray-700 hover:text-amber-600 hover:bg-gray-50 {% endif %}"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewbox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-6 shrink-0 {% if path starts with '/admin/news' %} text-amber-600 {% else %} text-gray-400 group-hover:text-amber-600{% endif %}"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"
                  />
                </svg>Actualité
              </a>
            </li>
            <li>
              <a
                href="{{ path('admin_image_index') }}"
                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold {% if path starts with '/admin/image' %} bg-gray-50 text-amber-600 {% else %} text-gray-700 hover:text-amber-600 hover:bg-gray-50 {% endif %}"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewbox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-6 shrink-0 {% if path starts with '/admin/image' %} text-amber-600 {% else %} text-gray-400 group-hover:text-amber-600{% endif %}"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
                  />
                </svg>Image
              </a>
            </li>
          </ul>
        </li>
        <li>
          <div class="text-xs/6 font-semibold text-gray-400">
            Liens utiles
          </div>
          <ul role="list" class="-mx-2 mt-2 space-y-1">
            <li>
              <a
                target="_blank"
                href="{{ path('home') }}"
                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-amber-600"
              >
                <span
                  class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-amber-600 group-hover:text-amber-600"
                >
                  A
                </span>
                <span class="truncate">Accès au site</span>
              </a>
            </li>
            <li>
              <a
                target="_blank"
                href="/logout"
                class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-amber-600"
              >
                <span
                  class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium text-gray-400 group-hover:border-amber-600 group-hover:text-amber-600"
                >
                  D
                </span>
                <span class="truncate">Déconnexion</span>
              </a>
            </li>
          </ul>
        </li>
        {% if 'ROLE_DEVELOPER' in app.user.roles %}
          <li>
            <div class="text-xs/6 font-semibold text-gray-400">
              Développeur
            </div>
            <ul role="list" class="-mx-2 mt-2 space-y-1">
              <li>
                <a
                  href="{{ path('admin_feature_index') }}"
                  class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold hover:bg-gray-50 hover:text-amber-600{% if path starts with '/admin/feature' %} bg-gray-50 text-amber-600 {% else %} text-gray-700 hover:bg-gray-50 hover:text-amber-600{% endif %}"
                >
                  <span
                    class="flex size-6 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-[0.625rem] font-medium {% if path starts with '/admin/feature' %} border-amber-600 text-amber-600 {% else %} text-gray-400 group-hover:border-amber-600 group-hover:text-amber-600{% endif %}"
                  >
                    F
                  </span>
                  <span class="truncate">Fonctionnalité</span>
                </a>
              </li>
            </ul>
          </li>
        {% endif %}
        <li class="-mx-6 mt-auto">
          <a
            href="#"
            class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
          >
            <img
              src="/images/logo.jpg"
              alt=""
              class="size-8 rounded-full bg-gray-50 outline -outline-offset-1 outline-black/5"
            />
            <span class="sr-only">Votre profile</span>
            <span aria-hidden="true">Marie-Pierre</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<div
  class="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-xs sm:px-6 lg:hidden"
>
  <button
    type="button"
    command="show-modal"
    commandfor="sidebar"
    class="relative -m-2.5 p-2.5 text-gray-700 lg:hidden"
  >
    <span class="sr-only">Ouvrir barre de navigation latérale</span>
    <svg
      viewbox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.5"
      data-slot="icon"
      aria-hidden="true"
      class="size-6"
    >
      <path
        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </button>
  <div class="relative flex-1 text-sm/6 font-semibold text-gray-900">
    {{ title }}
  </div>
  <a href="#" class="relative">
    <span class="sr-only">Votre profile</span>
    <img
      src="/images/logo.jpg"
      alt=""
      class="size-8 rounded-full bg-gray-50 outline -outline-offset-1 outline-black/5"
    />
  </a>
</div>
