<nav class="bg-black px-2 sm:px-4 py-2.5 w-full relative z-50" id="navMPSS"> <div class="flex items-center justify-between"> <a href="{{path('app_home')}}" id="logoMPSS" class="flex items-center"> <img src="import/images/LogoNavbar.png" class="h-16" alt="MPSS Logo"/> </a> <div class="flex items-center justify-around"> <div class="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2"> <ul class="flex flex-col p-2 border border-black rounded-lg bg-black lg:flex-row lg:space-x-8 lg:mt-0 lg:text-lg lg:font-medium lg:border-0 lg:bg-black"> <li class="flex items-center justify-center text-[20px]"> <a href="{{path('app_home')}}" class="block py-2 pl-3 pr-4 text-white rounded hover:text-gray-300 lg:p-0" aria-current="page">Accueil</a> </li> <li class="flex items-center justify-center text-[20px]"> <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 pl-3 pr-4 text-white rounded lg:border-0 hover:text-gray-300 lg:p-0 lg:w-auto">Coaching individuel <svg class="w-5 h-5 ml-1" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <!-- Dropdown menu --> <div id="dropdownNavbar" class="hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 "> <ul class="py-2 text-lg text-gray-700" aria-labelledby="dropdownLargeButton"> <li> <a href="{{path('app_individual_coaching_sante')}}" class="block px-4 py-2 hover:bg-gray-100">Transformation physique</a> </li> <li> <a href="{{path('app_individual_coaching_senior')}}" class="block px-4 py-2 hover:bg-gray-100">Sénior</a> </li> </ul> </div> </li> <li class="flex items-center justify-center text-[20px]"> <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar2" class="flex items-center justify-between w-full py-2 pl-3 pr-4 text-white rounded lg:border-0 hover:text-gray-300 lg:p-0 lg:w-auto">Coaching collectif <svg class="w-5 h-5 ml-1" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <!-- Dropdown menu --> <div id="dropdownNavbar2" class="hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 "> <ul class="py-2 text-lg text-gray-700 " aria-labelledby="dropdownLargeButton"> <li> <a href="{{path('app_coach_collectif')}}" class="block px-4 py-2 hover:bg-gray-100">Duo</a> </li> <li> <a href="{{path('app_coach_collectif')}}" class="block px-4 py-2 hover:bg-gray-100">Trio</a> </li> <li> <a href="{{path('app_coach_collectif')}}" class="block px-4 py-2 hover:bg-gray-100">Quatuor +</a> </li> </ul> </div> </li> <li class="flex items-center justify-center text-[20px]"> <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar3" class="flex items-center justify-between w-full py-2 pl-3 pr-4 text-white rounded lg:border-0 hover:text-gray-300 lg:p-0 lg:w-auto">Coaching à distance <svg class="w-5 h-5 ml-1" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <!-- Dropdown menu --> <div id="dropdownNavbar3" class="hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44"> <ul class="py-2 text-lg text-gray-700" aria-labelledby="dropdownLargeButton"> <li> <a href="{{path('app_distance_coaching_transformation')}}" class="block px-4 py-2 hover:bg-gray-100">Transformation physique</a> </li> <li> <a href="{{path('app_distance_coaching_preparation')}}" class="block px-4 py-2 hover:bg-gray-100">Challenge sportif</a> </li> </ul> </div> </li> <li class="flex items-center justify-center text-[20px]"> <a href="{{path('app_reservation')}}" class="block py-2 pl-3 pr-4 text-white rounded hover:text-gray-300 lg:p-0">Réservation</a> </li> {% if app.user %} {% else %} <li class="flex items-center justify-center text-[20px]"> <a href="{{path('app_login')}}" class="block py-2 pl-3 pr-4 text-white rounded hover:text-gray-300 lg:p-0">Connexion</a> </li> <li class="flex items-center justify-center text-[20px]"> <a href="{{path('app_register')}}" class="block py-2 pl-3 pr-4 text-white rounded hover:text-gray-300 lg:p-0">Inscription</a> </li> {% endif %} </ul> </div> </div> <div class="flex items-center lg:order-2"> {% if app.user %} <button type="button" class="flex mr-3 text-lg bg-gray-800 rounded-full lg:mr-0 focus:ring-4 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom"> <span class="sr-only">Open user menu</span> <img class="w-8 h-8 rounded-full" src="import/images/ProfilePicture.png" alt="user photo"> </button> {% endif %} <!-- Dropdown menu --> <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-black rounded-lg shadow" id="user-dropdown"> <div class="px-4 py-3"> <span class="block text-lg text-gray-900"> {% if app.user %}Bienvenue, {{ app.user.firstnameUser }} {% endif %} </span> <span class="block text-lg font-medium text-gray-500 truncate"> {% if app.user %} {{ app.user.email }} {% endif %} </span> </div> <ul class="py-2" aria-labelledby="user-menu-button"> <li> <a href="{{path('app_user_dashboard')}}" class="block px-4 py-2 text-lg text-gray-700 hover:bg-gray-100">Profil</a> </li> <li> <a href="{{path('app_user_settings')}}" class="block px-4 py-2 text-lg text-gray-700 hover:bg-gray-100">Paramètres</a> </li> <li> <a href="{{path('app_logout')}}" class="block px-4 py-2 text-lg text-gray-700 hover:bg-gray-100">Déconnexion</a> </li> </ul> </div> <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-lg text-white rounded-lg lg:hidden focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="mobile-menu-2" aria-expanded="false"> <span class="sr-only">Open main menu</span> <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path> </svg> </button> </div> </div></nav>