templates/vitrine/layout/header.html.twig line 1

Open in your IDE?
  1. <header id="header" class="w-full flex items-center justify-center px-4 fixed top-0 left-0 z-50 md:h-28 h-24 bg-header  {% if app.request.attributes.get('_route') == 'home' %}entrance-header{% endif %}">
  2.     <div class="w-full flex items-center justify-between md:px-12 ">
  3.         <div {% if app.request.attributes.get('_route') == 'home' %}id="entrance-logo"{% endif %} class="{% if app.request.attributes.get('_route') == 'home' %}flex{% else %}hidden{% endif %} w-full justify-center items-center absolute top-0 left-0 md:h-28 h-24">
  4.             <img class="w-10 aspect-auto" alt="{% trans %}Logo{% endtrans %}" src="{{ asset('vitrine/logo/logo-k-white.png') }}">
  5.         </div>
  6.         <div {% if app.request.attributes.get('_route') == 'home' %}id="second-logo"{% endif %} class="{% if app.request.attributes.get('_route') == 'home' %}hidden{% else %}flex{% endif %} w-full justify-between items-center  md:h-28 h-24 relative">
  7.             <a href="{{path('home')}}">
  8.                 <img class="h-14 xl:hidden block" alt="{% trans %}Logo{% endtrans %}" src="{{ asset('vitrine/logo/logo-k-white.png') }}">
  9.                 <img class="h-14 xl:block hidden" alt="{% trans %}Logo{% endtrans %}" src="{{ asset('vitrine/logo/logo-full-white.png') }}">
  10.             </a>
  11.             <div class="flex lg:gap-8 gap-4">
  12.                 <ul class="hidden lg:flex gap-8 items-center font-poppins">
  13.                     <li>
  14.                         <a class="{% if app.request.attributes.get('_route') == 'home' %}text-vitrineOrange font-semibold{% endif %}" href="{{path('home')}}">{% trans %}Accueil{% endtrans %}</a>
  15.                     </li>
  16.                     <hr class="border-r border-white h-5">
  17.                     <li>
  18.                         <a class="{% if app.request.attributes.get('_route') == 'gallery' %}text-vitrineOrange font-semibold{% endif %} " href="{{path('gallery')}}">{% trans %}Galerie{% endtrans %}</a>
  19.                     </li>
  20.                     <hr class="border-r border-white h-5">
  21.                     <li>
  22.                         <a class="{% if app.request.attributes.get('_route') == 'about' %}text-vitrineOrange font-semibold{% endif %}" href="{{path('about')}}">{% trans %}À propos{% endtrans %}</a>
  23.                     </li>
  24.                     <hr class="border-r border-white h-5">
  25.                     <li>
  26.                         <a class="{% if app.request.attributes.get('_route') == 'franchise' %}text-vitrineOrange font-semibold{% endif %}" href="{{path('franchise')}}">{% trans %}Franchise{% endtrans %}</a>
  27.                     </li>
  28.                     <hr class="border-r border-white h-5">
  29.                     <li>
  30.                         <a class="{% if app.request.attributes.get('_route') == 'contact' %}text-vitrineOrange font-semibold{% endif %} " href="{{path('contact')}}">{% trans %}Contact{% endtrans %}</a>
  31.                     </li>
  32.                     <hr class="border-r border-white h-5">
  33.                 </ul>
  34.                 <div class="relative flex items-center">
  35.                     <button id="language-selector" class="flex items-center gap-2 transition duration-100 hover:text-vitrineOrange">
  36.                         <span class="text-base">{{ app.request.locale|upper }}</span>
  37.                         <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  38.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  39.                         </svg>
  40.                     </button>
  41.                     
  42.                     <div id="language-popup" class="hidden absolute -bottom-[250%] left-0 bg-vitrineBlackOpacity backdrop-filter backdrop-blur-xl shadow-md overflow-hidden">
  43.                         {% for locale in locales %}
  44.                             <a href="{{ path('change_locale', {'locale': locale}) }}" class="not-animate block text-white px-4 py-2 hover:bg-vitrineOrange transition duration-100">
  45.                                 <span class="text-sm not-animate">
  46.                                     {{ locale|upper }}
  47.                                 </span>
  48.                             </a>
  49.                         {% endfor %}
  50.                     </div>
  51.                 </div>
  52.                 <div class="flex items-center gap-4">
  53.                     <a href="{{ path('reservation_tunnel') }}" class="px-4 py-2 primary-btn relative">{% trans %}RÉSERVER{% endtrans %}</a>
  54.                     <a href="{{ path('carte_cadeau_tunnel') }}" class="px-4 py-2 primary-btn relative">{% trans %}OFFRIR{% endtrans %}</a>
  55.                 </div>
  56.             </div>
  57.             <svg id="burger-menu" class="lg:hidden block w-10 h-10 z-40 cursor-pointer" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
  58.                 <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
  59.             </svg>
  60.         </div>
  61.     </div>
  62. </header>
  63. <div id="menu" class="hidden bg-vitrineOrange h-dvh fixed top-0 right-0 w-full z-50 transition duration-300 overflow-hidden">
  64.     <div class="w-full h-dvh relative">
  65.         <svg id="close-menu" class="fixed top-5 right-2 w-14 h-14 cursor-pointer z-[70]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
  66.             <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
  67.         </svg>
  68.         <ul id="ul-menu" class="flex flex-col justify-center h-screen gap-6 p-4 md:p-8 relative">
  69.             <li>
  70.                 <a href="{{path('home')}}" class="text-white text-2xl font-semibold font-poppins not-animate">{% trans %}Accueil{% endtrans %}</a>
  71.             </li>
  72.             <hr class="border-r border-white w-8 opacity-50 ">
  73.             <li>
  74.                 <a href="{{path('gallery')}}" class="text-white text-2xl font-semibold font-poppins not-animate">{% trans %}Galerie{% endtrans %}</a>
  75.             </li>
  76.             <hr class="border-r border-white w-8 opacity-50 ">
  77.             <li>
  78.                 <a href="{{path('about')}}" class="text-white text-2xl font-semibold font-poppins not-animate">{% trans %}À propos{% endtrans %}</a>
  79.             </li>
  80.             <hr class="border-r border-white w-8 opacity-50 ">
  81.             <li>
  82.                 <a href="{{path('franchise')}}" class="text-white text-2xl font-semibold font-poppins not-animate">{% trans %}Franchise{% endtrans %}</a>
  83.             </li>
  84.             <hr class="border-r border-white w-8 opacity-50 ">
  85.             <li>
  86.                 <a href="{{path('contact')}}" class="text-white text-2xl font-semibold font-poppins not-animate">{% trans %}Contact{% endtrans %}</a>
  87.             </li>
  88.             <hr class="border-r border-white w-8 opacity-50 ">
  89.             <li>
  90.                 <a href="{{ path('reservation_tunnel') }}" class="text-white text-2xl font-semibold font-poppins not-animate">{% trans %}Réserver{% endtrans %}</a>
  91.             </li>
  92.             <hr class="border-r border-white w-8 opacity-50 ">
  93.             <li>
  94.                 <a href="{{ path('carte_cadeau_tunnel') }}" class="text-white text-2xl font-semibold font-poppins not-animate">{% trans %}Offrir{% endtrans %}</a>
  95.             </li>
  96.             <div class="absolute bottom-8 right-8 w-max">
  97.                 <div class="relative">
  98.                     <svg id="menu-bulle-1" class="absolute top-[10px] right-[24px]" width="14" height="14" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
  99.                         <path d="M0.429966 12.61C1.05997 17.84 6.30998 22.19 12.01 21.63C14.84 21.37 17.63 19.96 19.48 17.64C21.29 15.25 22.11 12.17 21.69 9.15999C21.14 6.17999 19.3799 3.49 16.9099 1.82C14.4299 0.179998 11.32 -0.270005 8.55997 0.379995C2.97997 1.66 -0.630034 7.43998 0.429966 12.61ZM17.99 12.91C17.98 14.08 17.55 15.18 16.9 16.15C16.21 17.09 15.26 17.86 14.19 18.23C13.12 18.65 11.91 18.65 10.87 18.19L10.81 18.18C10.79 18.17 10.76 18.08 10.77 18.06C10.78 18.04 10.81 18 10.83 18C14.57 17.39 17.34 13.55 16.75 9.82C16.74 9.77 16.75 9.71 16.8 9.7C16.83 9.7 16.86 9.72998 16.88 9.73998" fill="white"/>
  100.                     </svg>
  101.                     <img class="w-12" src="{{asset('vitrine/logo/logo-k-white.png')}}" alt="logo taaka">
  102.                 </div>
  103.             </div>
  104.         </ul>
  105.     </div>
  106. </div>
  107. <script>
  108.     document.addEventListener('DOMContentLoaded', function() {
  109.         // Burger Menu
  110.         const burgerMenu = document.getElementById('burger-menu');
  111.         const closeMenu = document.getElementById('close-menu');
  112.         const menu = document.getElementById('menu');
  113.         const ulMenu = document.getElementById('ul-menu');
  114.         const menuBulle1 = document.getElementById('menu-bulle-1');
  116.         function showMenu() {
  117.             anime({
  118.                 targets: menu,
  119.                 width: '100vw',
  120.                 height: '100vh',
  121.                 borderBottomLeftRadius: ['100%', '0%'],
  122.                 duration: 250,
  123.                 easing: 'easeInOutQuad'
  124.             });
  125.             anime({
  126.                 targets: ulMenu,
  127.                 opacity: [0, 1],
  128.                 duration: 150,
  129.                 easing: 'easeInOutQuad',
  130.                 delay: 250
  131.             });
  132.             anime({
  133.                 targets: menuBulle1,
  134.                 translateY: [0, -50],
  135.                 opacity: [1, 0],
  136.                 width: ['0', '14px'],
  137.                 height: ['0', '14px'],
  138.                 duration: 1500,
  139.                 easing: 'linear',
  140.                 delay: 150
  141.             });
  142.         }
  144.         function hideMenu() {
  145.             anime({
  146.                 targets: ulMenu,
  147.                 opacity: [1, 0],
  148.                 duration: 150,
  149.                 easing: 'easeInOutQuad'
  150.             });
  151.             
  152.             setTimeout(() => {
  153.                 anime({
  154.                     targets: menu,
  155.                     width: ['100vw', '0'],
  156.                     height: ['100vh', '0'],
  157.                     borderBottomLeftRadius: ['0%', '100%'],
  158.                     duration: 250,
  159.                     easing: 'easeInOutQuad',
  160.                     complete: function() {
  161.                         menu.classList.add('hidden');
  162.                     }
  163.                 });
  164.             }, 150);
  165.         }
  167.         burgerMenu.addEventListener('click', function () {
  168.             menu.classList.remove('hidden');
  169.             showMenu();
  170.         });
  172.         closeMenu.addEventListener('click', function () {
  173.             hideMenu();
  174.         });
  176.         const languageSelector = document.getElementById('language-selector');
  177.         const languagePopup = document.getElementById('language-popup');
  179.         languageSelector.addEventListener('click', function() {
  180.             languagePopup.classList.toggle('hidden');
  181.         });
  183.         // Fermer le pop-up si on clique en dehors
  184.         document.addEventListener('click', function(event) {
  185.             if (!languageSelector.contains(event.target) && !languagePopup.contains(event.target)) {
  186.                 languagePopup.classList.add('hidden');
  187.             }
  188.         });
  189.     });
  190. </script>