templates/_header.html.twig line 1

Open in your IDE?
  1. <div class="desktop-menu">
  2.     <div class="container pt-4">
  3.         <div class="row d-flex align-items-center">
  4.             <div class="col-lg-2 col-sm-12 mobile-header">
  5.                 {# Facebook #}
  6.                 {% if setting.siteFacebook != null %}
  7.                     <a href="{{ setting.siteFacebook }}" target="_blank" class="text-decoration-none" style="color: #0a3962;">
  8.                         <svg width="32" height="32" viewBox="0 0 24 24">
  9.                             <path fill="currentColor"
  10.                                 d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z">
  11.                             </path>
  12.                         </svg>
  13.                     </a>
  14.                 {% endif %}
  15.                 {# Instagram #}
  16.                 {% if setting.siteInstagram != null %}
  17.                     <a href="{{ setting.siteInstagram }}" target="_blank" class="text-decoration-none" style="color: #0a3962;">
  18.                         <svg width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M160 128a32 32 0 1 1-32-32a32.1 32.1 0 0 1 32 32Zm68-44v88a56 56 0 0 1-56 56H84a56 56 0 0 1-56-56V84a56 56 0 0 1 56-56h88a56 56 0 0 1 56 56Zm-52 44a48 48 0 1 0-48 48a48 48 0 0 0 48-48Zm16-52a12 12 0 1 0-12 12a12 12 0 0 0 12-12Z"/></svg>
  19.                     </a>
  20.                 {% endif %}
  21.                 {# LinkedIn #}
  22.                 {% if setting.siteLinkedin != null %}
  23.                     <a href="{{ setting.siteLinkedin }}" target="_blank" class="text-decoration-none" style="color: #0a3962;">
  24.                         <svg width="29" height="29" viewBox="0 0 20 20">
  25.                             <path fill="currentColor"
  26.                                 d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6s9.6-4.298 9.6-9.6S15.302.4 10 .4zM7.65 13.979H5.706V7.723H7.65v6.256zm-.984-7.024c-.614 0-1.011-.435-1.011-.973c0-.549.409-.971 1.036-.971s1.011.422 1.023.971c0 .538-.396.973-1.048.973zm8.084 7.024h-1.944v-3.467c0-.807-.282-1.355-.985-1.355c-.537 0-.856.371-.997.728c-.052.127-.065.307-.065.486v3.607H8.814v-4.26c0-.781-.025-1.434-.051-1.996h1.689l.089.869h.039c.256-.408.883-1.01 1.932-1.01c1.279 0 2.238.857 2.238 2.699v3.699z">
  27.                             </path>
  28.                         </svg>
  29.                     </a>
  30.                 {% endif %}
  31.             </div>
  32.             <div class="col-lg-8 col-sm-12 mb-2">
  33.                 <a href="{{ path('app_home') }}" class="text-decoration-none">
  34.                     <img src="{{ asset('assets/img/' ~ setting.siteLogo ) }}" alt="{{ setting.siteName }}"
  35.                     class="img-fluid d-block mx-auto" style="max-width: 550px; width: 100%;">
  36.                 </a>
  37.             </div>
  38.             <div class="col-lg-2 col-sm-12 mobile-header">
  39.                 <div class="row mb-4">
  40.                     <div class="col mobile-padding">
  41.                         <svg width="32" height="32" viewBox="0 0 24 24" style="color: #0a3962;">
  42.                             <path fill="currentColor" fill-rule="evenodd"
  43.                                 d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12zm8 0c0-.17.01-.336.031-.5H12a1 1 0 1 0 0-2H9.877A3.993 3.993 0 0 1 13 8c.902 0 1.731.297 2.4.8a1 1 0 0 0 1.2-1.6a6.001 6.001 0 0 0-9.057 2.3H7a1 1 0 0 0 0 2h.02a6.081 6.081 0 0 0 0 1H7a1 1 0 1 0 0 2h.544a6.001 6.001 0 0 0 9.057 2.3a1 1 0 0 0-1.201-1.6c-.669.503-1.498.8-2.4.8a3.992 3.992 0 0 1-3.123-1.5H12a1 1 0 1 0 0-2H9.031A4.039 4.039 0 0 1 9 12z"
  44.                                 clip-rule="evenodd"></path>
  45.                         </svg>
  46.                         <span class="fw-bold" style="color: #0a3962;">
  47.                             <a href="{{ path('app_tarif') }}" class="text-decoration-none" style="color: #0a3962;">
  48.                                 Les tarifs
  49.                             </a>
  50.                         </span>
  51.                     </div>
  52.                 </div>
  53.                 <div class="row">
  54.                     <div class="col">
  55.                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  56.                             aria-hidden="true" role="img" class="iconify iconify--ri" width="32" height="32"
  57.                             preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" style="color: #21afe6;">
  58.                             <path fill="currentColor"
  59.                                 d="M4 22a8 8 0 1 1 16 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6s6 2.685 6 6s-2.685 6-6 6z">
  60.                             </path>
  61.                         </svg>
  62.                         <span class="fw-bold">
  63.                             <a href="{{ setting.siteEspaceClient }}" target="_blank" class="text-decoration-none" style="color: #21afe6;">
  64.                                 Espace client
  65.                             </a>
  66.                         </span>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.     </div>
  73.     <div class="container">
  74.         <div class="row">
  75.             <div class="col header-menu mobile-header mobile-header-menu">
  76.                 <a href="{{ path('app_home') }}" class="menu-elem text-decoration-none fw-bold text-dark text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'home' %}active{% endif %}" style="letter-spacing : 2px;">
  77.                     Accueil
  78.                 </a>
  79.                 <a href="{{ path('app_difference') }}" class="menu-elem ext-decoration-none fw-bold text-dark text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'difference' %}active{% endif %}" style="letter-spacing : 2px;">
  80.                     Notre différence
  81.                 </a>
  82.                 <a href="{{ path('app_expert_index') }}" class="menu-elem ext-decoration-none fw-bold text-dark text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'experts' %}active{% endif %}" style="letter-spacing : 2px;">
  83.                     Nos experts
  84.                 </a>
  85.                 <div class="menu-elem dropdown">
  86.                     <a href="#" data-bs-toggle="dropdown" aria-expanded="false" class="dropdown-toggle text-decoration-none fw-bold text-dark text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'blog' %}active{% endif %}" style="letter-spacing : 2px;">
  87.                     Nos actualités
  88.                     </a>
  89.                     <ul class="dropdown-menu">
  90.                         <li><a class="dropdown-item" href="{{ path('app_blog_article_index') }}">Blog</a></li>
  91.                         <li><a class="dropdown-item" href="{{ path('app_newsletter') }}">Newsletter</a></li>
  92.                     </ul>
  93.                 </div>
  94.                 <a href="{{ path('app_office') }}" class="menu-elem text-decoration-none fw-bold text-dark text-uppercase padding {% if pageTitle is defined and pageTitle != null  and pageTitle == 'offices' %}active{% endif %}" style="letter-spacing : 2px;">
  95.                     Nos offices
  96.                 </a>
  97.                 <a href="{{ path('app_contact') }}" class="menu-elem text-decoration-none fw-bold text-dark text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'contact' %}active{% endif %}" style="letter-spacing : 2px;">
  98.                     Contact
  99.                 </a>
  100.                 <a href="{{ path('app_offres') }}" class="menu-elem text-decoration-none fw-bold text-dark text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'offres' %}active{% endif %}" style="letter-spacing : 2px;">
  101.                     Nos offres d'emploi
  102.                 </a>
  103.             </div>
  104.         </div>
  105.     </div>
  106. </div>
  108. <div class="mobile-menu">
  110.     <div class="nav-links">
  111.         <div class="d-flex justify-content-center align-items-center">
  112.             {# Facebook #}
  113.             {% if setting.siteFacebook != null %}
  114.                 <a href="{{ setting.siteFacebook }}" target="_blank" class="text-decoration-none" style="color: #0a3962;">
  115.                     <svg width="32" height="32" viewBox="0 0 24 24">
  116.                         <path fill="currentColor"
  117.                             d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z">
  118.                         </path>
  119.                     </svg>
  120.                 </a>
  121.             {% endif %}
  123.             {# Instagram #}
  124.             {% if setting.siteInstagram != null %}
  125.                 <a href="{{ setting.siteInstagram }}" target="_blank" class="text-decoration-none" style="color: #0a3962;">
  126.                     <svg width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M160 128a32 32 0 1 1-32-32a32.1 32.1 0 0 1 32 32Zm68-44v88a56 56 0 0 1-56 56H84a56 56 0 0 1-56-56V84a56 56 0 0 1 56-56h88a56 56 0 0 1 56 56Zm-52 44a48 48 0 1 0-48 48a48 48 0 0 0 48-48Zm16-52a12 12 0 1 0-12 12a12 12 0 0 0 12-12Z"/></svg>
  127.                 </a>
  128.             {% endif %}
  129.             {# LinkedIn #}
  130.             {% if setting.siteLinkedin != null %}
  131.                 <a href="{{ setting.siteLinkedin }}" target="_blank" class="text-decoration-none" style="color: #0a3962;">
  132.                     <svg width="29" height="29" viewBox="0 0 20 20">
  133.                         <path fill="currentColor"
  134.                             d="M10 .4C4.698.4.4 4.698.4 10s4.298 9.6 9.6 9.6s9.6-4.298 9.6-9.6S15.302.4 10 .4zM7.65 13.979H5.706V7.723H7.65v6.256zm-.984-7.024c-.614 0-1.011-.435-1.011-.973c0-.549.409-.971 1.036-.971s1.011.422 1.023.971c0 .538-.396.973-1.048.973zm8.084 7.024h-1.944v-3.467c0-.807-.282-1.355-.985-1.355c-.537 0-.856.371-.997.728c-.052.127-.065.307-.065.486v3.607H8.814v-4.26c0-.781-.025-1.434-.051-1.996h1.689l.089.869h.039c.256-.408.883-1.01 1.932-1.01c1.279 0 2.238.857 2.238 2.699v3.699z">
  135.                         </path>
  136.                     </svg>
  137.                 </a>
  138.             {% endif %}
  139.         </div>
  141.         {# Logo #}
  142.         <a href="{{ path('app_home') }}" class="text-decoration-none">
  143.             <img src="{{ asset('assets/img/' ~ setting.siteLogo ) }}" alt="{{ setting.siteName }}"
  144.             class="img-fluid d-block mx-auto" style="max-width: 550px; width: 100%;">
  145.         </a>
  147.         <div class="d-flex justify-content-center align-items-center flex-column my-4">
  148.             {# Menu Tarifs, Clients #}
  149.             <div class="d-flex">
  150.                 <svg class="me-2" width="25" height="25" viewBox="0 0 24 24" style="color: #0a3962;">
  151.                     <path fill="currentColor" fill-rule="evenodd"
  152.                         d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12zm8 0c0-.17.01-.336.031-.5H12a1 1 0 1 0 0-2H9.877A3.993 3.993 0 0 1 13 8c.902 0 1.731.297 2.4.8a1 1 0 0 0 1.2-1.6a6.001 6.001 0 0 0-9.057 2.3H7a1 1 0 0 0 0 2h.02a6.081 6.081 0 0 0 0 1H7a1 1 0 1 0 0 2h.544a6.001 6.001 0 0 0 9.057 2.3a1 1 0 0 0-1.201-1.6c-.669.503-1.498.8-2.4.8a3.992 3.992 0 0 1-3.123-1.5H12a1 1 0 1 0 0-2H9.031A4.039 4.039 0 0 1 9 12z"
  153.                         clip-rule="evenodd"></path>
  154.                 </svg>
  155.                 <span class="fw-bold" style="color: #0a3962;">
  156.                     <a href="{{ path('app_tarif') }}" class="text-decoration-none" style="color: #0a3962;">
  157.                         Les tarifs
  158.                     </a>
  159.                 </span>
  160.             </div>
  162.             <div class="d-flex mt-3">
  163.                 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  164.                 aria-hidden="true" role="img" class="iconify iconify--ri" width="32" height="32"
  165.                 preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" style="color: #21afe6;">
  166.                 <path fill="currentColor"
  167.                     d="M4 22a8 8 0 1 1 16 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6s6 2.685 6 6s-2.685 6-6 6z">
  168.                 </path>
  169.                 </svg>
  170.                 <span class="fw-bold">
  171.                     <a href="{{ setting.siteEspaceClient }}" target="_blank" class="text-decoration-none" style="color: #21afe6;">
  172.                         Espace client
  173.                     </a>
  174.                 </span>
  175.             </div>
  176.         </div>
  178.         <div class="d-flex justify-content-center align-items-center flex-column">
  179.             {# Menu principal #}
  180.             <a href="{{ path('app_home') }}" class="text-decoration-none fw-bold text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'home' %}active{% endif %}">
  181.                 Accueil
  182.             </a>
  183.             <a href="{{ path('app_difference') }}" class="text-decoration-none fw-bold text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'difference' %}active{% endif %}">
  184.                 Notre différence
  185.             </a>
  186.             <a href="{{ path('app_expert_index') }}" class="text-decoration-none fw-bold text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'experts' %}active{% endif %}">
  187.                 Nos experts
  188.             </a>
  189.             <div class="menu-elem dropdown">
  190.                 <a href="#" data-bs-toggle="dropdown" aria-expanded="false" class="dropdown-toggle text-decoration-none fw-bold text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'blog' %}active{% endif %}">
  191.                 Nos actualités
  192.                 </a>
  193.                 <ul class="dropdown-menu">
  194.                     <li><a class="dropdown-item" href="{{ path('app_blog_article_index') }}">Blog</a></li>
  195.                     <li><a class="dropdown-item" href="{{ path('app_newsletter') }}">Newsletter</a></li>
  196.                 </ul>
  197.             </div>
  198.             <a href="{{ path('app_office') }}" class="text-decoration-none fw-bold text-uppercase padding {% if pageTitle is defined and pageTitle != null  and pageTitle == 'offices' %}active{% endif %}">
  199.                 Nos offices
  200.             </a>
  201.             <a href="{{ path('app_contact') }}" class="text-decoration-none fw-bold text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'contact' %}active{% endif %}">
  202.                 Contact
  203.             </a>
  204.             <a href="{{ path('app_offres') }}" class="text-decoration-none fw-bold text-uppercase padding {% if pageTitle is defined and pageTitle != null and pageTitle == 'offres' %}active{% endif %}">
  205.                 Nos offres d'emploi
  206.             </a>
  208.         </div>
  210.     </div>
  212.     {# Logo #}
  213.     <a href="{{ path('app_home') }}" class="homebutton text-decoration-none">
  214.         <img src="{{ asset('assets/img/' ~ setting.siteLogo ) }}" alt="{{ setting.siteName }}" class="img-fluid" style="max-width: 270px; width: 100%;">
  215.     </a>
  216.     {# <img src="{{ asset('assets/img/menu-btn.png') }}" alt="Menu burger" class="menu-burger"> #}
  217.     <div id="burger-menu">
  218.         <span></span>
  219.     </div>
  220. </div>
  222. <script>
  223.     const menuBurger = document.querySelector('#burger-menu');
  224.     const navLinks = document.querySelector('.nav-links');
  226.     menuBurger.addEventListener('click', () => {
  227.         navLinks.classList.toggle('displayburger');
  228.         menuBurger.classList.toggle("close");
  229.     });
  231. </script>