templates/components/nav_landing.html.twig line 1

  1. <nav class="sticky bg-white w-full fixed z-[9999] top-0 left-0 border-b border-gray-200">
  2.     <div class="flex items-center justify-between px-4 py-2 container mx-auto">
  3.         <!-- Logo -->
  4.         <a href="{{ path('home') }}" class="flex items-center">
  5.             <img src="{{ asset('images/site/logo.png') }}" class="h-12 mr-3 sm:h-16" alt="Roomlers Logo">
  6.             <span class="self-center text-xl font-semibold uppercase whitespace-nowrap">Roomlers</span>
  7.         </a>
  9.         <!-- Bouton Burger pour mobile/tablette -->
  10.         <button id="mobileMenuButton" class="lg:hidden p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none">
  11.             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  12.                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
  13.             </svg>
  14.         </button>
  16.         <!-- Conteneur pour les éléments alignés à droite (version desktop) -->
  17.         <div class="nav-links hidden lg:flex items-center space-x-4">
  18.             <!-- Onglet "Pré-réservation de logement" -->
  19.             <a href="{{ path('attestation') }}" class="px-4 py-2 text-black rounded-lg font-semibold hover:underline">
  20.                 {{ 'nav_landing.accommodation_prereservation'|trans }}
  21.             </a>
  23.             <!-- Liste déroulante pour la langue -->
  24.             <div class="relative">
  25.                 <button class="language-dropdown flex items-center px-4 py-2 text-black rounded-lg font-semibold hover:underline">
  26.                     <img src="{{ asset('images/flagfr.png') }}" class="w-6 h-4 mr-2" alt="France Flag">
  27.                     <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  28.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
  29.                     </svg>
  30.                 </button>
  31.                 <div class="language-menu hidden absolute right-0 mt-2 w-40 bg-white border border-gray-200 rounded-lg shadow-lg">
  32.     <a href="#" data-language="fr" class="flex items-center px-4 py-2 hover:bg-gray-100">
  33.         <img src="{{ asset('images/flagfr.png') }}" class="w-6 h-4 mr-3" alt="France Flag"> French
  34.     </a>
  35.     <a href="#" data-language="en" class="flex items-center px-4 py-2 hover:bg-gray-100">
  36.         <img src="{{ asset('images/flagen.png') }}" class="w-6 h-4 mr-3" alt="UK Flag"> English
  37.     </a>
  38. </div>
  39.             </div>
  41.             <!-- Icône de coeur -->
  42.             <button id="openModalLink1" class="px-4 py-2 text-black rounded-lg font-semibold hover:underline">
  43.                 <svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  44.                     <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
  45.                       fill="white" stroke="black" stroke-width="2"/>
  46.                 </svg>
  47.             </button>
  49.             <!-- Dropdown utilisateur -->
  50.             <div class="relative">
  51.                 <button class="user-dropdown px-4 py-2 text-black rounded-lg font-semibold hover:underline" type="button">
  52.                     <i class="fa-solid fa-user"></i>
  53.                 </button>
  54.                 <div class="user-dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-lg shadow-lg">
  55.                     <a class="block px-4 py-2 hover:bg-gray-100" href="{{ path('app_register') }}">{{ 'nav_landing.register'|trans }}</a>
  56.                     <a class="block px-4 py-2 hover:bg-gray-100" href="{{ path('app_login_site') }}">{{ 'nav_landing.login'|trans }}</a>
  57.                     <a class="block px-4 py-2 hover:bg-gray-100" href="{{ path('attestation') }}">{{ 'nav_landing.accommodation_prereservation'|trans }}</a>
  58.                     <a class="block px-4 py-2 hover:bg-gray-100" href="{{ path('userFormOwner') }}">{{ 'nav_landing.add_accommodation'|trans }}</a>
  59.                 </div>
  60.             </div>
  61.         </div>
  62.     </div>
  64.     <!-- Menu mobile (caché par défaut) -->
  65.     <div id="mobileMenu" class="hidden lg:hidden bg-white border-t border-gray-200">
  66.         <div class="px-2 pt-2 pb-3 space-y-1">
  67.             <a href="{{ path('attestation') }}" class="block px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100">
  68.                 {{ 'nav_landing.accommodation_prereservation'|trans }}
  69.             </a>
  71.             <!-- Dropdown langue mobile -->
  72.             <div class="relative">
  73.                 <button class="language-dropdown flex items-center px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100">
  74.                     <img src="{{ asset('images/flagfr.png') }}" class="w-6 h-4 mr-2" alt="France Flag">
  75.                     <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  76.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
  77.                     </svg>
  78.                 </button>
  79.                 <div class="language-menu hidden pl-4">
  80.                     <a href="#" data-language="fr" class="flex items-center px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100">
  81.                         <img src="{{ asset('images/flagfr.png') }}" class="w-6 h-4 mr-2" alt="France Flag">
  82.                     </a>
  83.                     <a href="#" data-language="en" class="flex items-center px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100">
  84.                         <img src="{{ asset('images/flagen.png') }}" class="w-6 h-4 mr-2" alt="UK Flag">
  85.                     </a>
  86.                 </div>
  87.             </div>
  89.             <!-- Bouton coeur mobile -->
  90.             <button id="openModalLinkMobile" class="w-full text-left px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100 flex items-center">
  91.                 <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  92.                     <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
  93.                       fill="white" stroke="black" stroke-width="2"/>
  94.                 </svg>
  95.                 {{ 'nav_landing.favorites'|trans }}
  96.             </button>
  98.             <!-- Dropdown utilisateur mobile -->
  99.             <div class="relative">
  100.                 <button class="user-dropdown w-full text-left px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100 flex items-center">
  101.                     <i class="fa-solid fa-user mr-2"></i>
  102.                     {{ 'nav_landing.my_account'|trans }}
  103.                 </button>
  104.                 <div class="user-dropdown-menu hidden pl-4">
  105.                     <a class="block px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100" href="{{ path('app_register') }}">{{ 'nav_landing.register'|trans }}</a>
  106.                     <a class="block px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100" href="{{ path('app_login_site') }}">{{ 'nav_landing.login'|trans }}</a>
  107.                     <a class="block px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100" href="{{ path('attestation') }}">{{ 'nav_landing.accommodation_prereservation'|trans }}</a>
  108.                     <a class="block px-3 py-2 text-black rounded-lg font-semibold hover:bg-gray-100" href="{{ path('userFormOwner') }}">{{ 'nav_landing.add_accommodation'|trans }}</a>
  109.                 </div>
  110.             </div>
  111.         </div>
  112.     </div>
  113. </nav>
  115. <!-- Modal de connexion/inscription -->
  116. <div id="connectModal" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  117.     <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
  118.         <p class="text-lg font-semibold mb-4">{{ 'nav_landing.choose_option'|trans }}</p>
  119.         <button onclick="window.location.href='{{ path('app_login_site') }}'" class="bg-yellow-400 text-black px-4 py-2 rounded-lg font-semibold hover:bg-yellow-500 transition mb-2 w-full">
  120.             {{ 'nav_landing.login'|trans }}
  121.         </button>
  122.         <button onclick="window.location.href='{{ path('app_register') }}'" class="bg-yellow-400 text-black px-4 py-2 rounded-lg font-semibold hover:bg-yellow-500 transition w-full">
  123.             {{ 'nav_landing.register'|trans }}
  124.         </button>
  125.     </div>
  126. </div>
  128. <script>
  129.     document.addEventListener('DOMContentLoaded', function () {
  130.         // Fonction pour afficher le bon drapeau selon l'URL
  131.         function updateCurrentFlag() {
  132.             const lang = window.location.pathname.startsWith('/en') ? 'en' : 'fr';
  133.             const flagSrc = lang === 'en' ? "{{ asset('images/flagen.png') }}" : "{{ asset('images/flagfr.png') }}";
  135.             document.querySelectorAll('.language-dropdown img').forEach(flag => {
  136.                 flag.src = flagSrc;
  137.             });
  138.         }
  140.         updateCurrentFlag();
  142.         // Gestion du changement de langue
  143.         document.querySelectorAll('[data-language]').forEach(link => {
  144.             link.addEventListener('click', function (event) {
  145.                 event.preventDefault();
  146.                 const language = this.getAttribute('data-language');
  147.                 const currentPath = window.location.pathname;
  148.                 const searchParams = window.location.search;
  150.                 // Supprimer le préfixe de langue actuel s'il existe
  151.                 const pathWithoutLang = currentPath.replace(/^\/[a-z]{2}\//, '/');
  153.                 // Construire le nouvel URL avec le préfixe de langue
  154.                 const newPath = language === 'en' ? `/en${pathWithoutLang}` : pathWithoutLang;
  156.                 // Recharger la page avec le nouvel URL
  157.                 window.location.href = newPath + searchParams;
  158.             });
  159.         });
  161.         // Gestion des dropdowns (langue & utilisateur)
  162.         function setupDropdown(triggerSelector, menuSelector) {
  163.             const triggers = document.querySelectorAll(triggerSelector);
  164.             const menus = document.querySelectorAll(menuSelector);
  166.             triggers.forEach((trigger, index) => {
  167.                 trigger.addEventListener('click', function (event) {
  168.                     event.stopPropagation();
  169.                     menus[index].classList.toggle('hidden');
  170.                 });
  171.             });
  173.             document.addEventListener('click', function (event) {
  174.                 menus.forEach(menu => {
  175.                     if (!menu.contains(event.target)) {
  176.                         menu.classList.add('hidden');
  177.                     }
  178.                 });
  179.             });
  180.         }
  182.         setupDropdown('.language-dropdown', '.language-menu');
  183.         setupDropdown('.user-dropdown', '.user-dropdown-menu');
  185.         // Gestion du menu mobile
  186.         const mobileMenuButton = document.getElementById('mobileMenuButton');
  187.         const mobileMenu = document.getElementById('mobileMenu');
  188.         let menuOpen = false;
  190.         if (mobileMenuButton && mobileMenu) {
  191.             mobileMenuButton.addEventListener('click', function (e) {
  192.                 e.preventDefault();
  193.                 e.stopPropagation();
  194.                 menuOpen = !menuOpen;
  195.                 mobileMenu.classList.toggle('hidden', !menuOpen);
  196.             });
  198.             document.addEventListener('click', function (e) {
  199.                 if (menuOpen && !mobileMenu.contains(e.target) && !mobileMenuButton.contains(e.target)) {
  200.                     menuOpen = false;
  201.                     mobileMenu.classList.add('hidden');
  202.                 }
  203.             });
  205.             mobileMenu.addEventListener('click', function (e) {
  206.                 e.stopPropagation();
  207.             });
  208.         }
  210.         // Gestion de la modal de connexion
  211.         const openModalElements = document.querySelectorAll('#openModalLink1, #openModalLinkMobile');
  212.         const connectModal = document.getElementById('connectModal');
  214.         if (openModalElements.length > 0 && connectModal) {
  215.             openModalElements.forEach(element => {
  216.                 element.addEventListener('click', function (event) {
  217.                     event.preventDefault();
  218.                     connectModal.classList.remove('hidden');
  219.                 });
  220.             });
  222.             connectModal.addEventListener('click', function (event) {
  223.                 if (event.target === connectModal) {
  224.                     connectModal.classList.add('hidden');
  225.                 }
  226.             });
  228.             connectModal.querySelector('.bg-white').addEventListener('click', function (event) {
  229.                 event.stopPropagation();
  230.             });
  231.         }
  232.     });
  233. </script>