templates/includes/_header.html.twig line 1

  1. <div class="container-fluid bg-white" id="nav-container">
  2.     <div class="container">
  3.         <div class="d-none d-md-block">
  4.             <nav role="navigation" class="stroke py-3 d-flex justify-content-between align-items-center">
  5.                 <div class="d-flex justify-content-center align-items-center gap-5">
  6.                     <a href="{{ path('homepage') }}">
  7.                         <div class="logo">
  8.                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.81 85.37">
  9.                                 <defs>
  10.                                     <style>.svg-logo {
  11.                                             fill: #181a35;
  12.                                         }</style>
  13.                                 </defs>
  14.                                 <g id="Calque_2" data-name="Calque 2">
  15.                                     <g id="Calque_1-2" data-name="Calque 1">
  16.                                         <path class="svg-logo"
  17.                                               d="M61,71.88q-.24,10.43-7.73,10.43H34.86q-6.73,0-7.61-8.41v-3a17.27,17.27,0,0,0-2.73-9.77A17.27,17.27,0,0,0,17.27,55a23.66,23.66,0,0,0-10-2.09V67a48.64,48.64,0,0,1-.84,9.78Q4.93,83.57,0,83.57v1.8H64.81V66H61.15Q61.15,68.88,61,71.88Z"/>
  18.                                         <path class="svg-logo"
  19.                                               d="M6.59,7a28,28,0,0,1,.66,6.9A16.25,16.25,0,0,0,10,23.5a16.27,16.27,0,0,0,7.26,5.73,26,26,0,0,0,10,1.88V12.59a23,23,0,0,1,.57-5.25,8,8,0,0,1,2.12-3.95,6.25,6.25,0,0,1,4.56-1.53V0H0V1.86Q5.22,1.86,6.59,7Z"/>
  20.                                         <path class="svg-logo logo-star"
  21.                                               d="M17.84,39,10,32l4.2,9.55-6.9,7.73,9.56-4.2,7.54,6.73-4.08-9.29c2-2.3,6.8-7.63,6.8-7.63Z"/>
  22.                                     </g>
  23.                                 </g>
  24.                             </svg>
  25.                         </div>
  26.                     </a>
  27.                     <a class="header-subtitle" href="{{ path('homepage') }}">
  28.                         In Numerus Veritas
  29.                     </a>
  30.                 </div>
  32.                 <div class="text-center d-flex align-items-center">
  33.                     <ul class="text-deepblue navbar-nav mx-auto d-flex flex-row justify-content-center align-items-center">
  34.                         <li class="nav-item">
  35.                             <a class="nav-link" href="{{ path('test') }}">Mon thème</a>
  36.                         </li>
  37.                         <li class="nav-item">
  38.                             <a class="nav-link" href="{{ path('numbers') }}">La numérologie</a>
  39.                         </li>
  40.                         <li class="nav-item">
  41.                             <a class="nav-link" href="{{ path('about') }}">À propos</a>
  42.                         </li>
  43.                         <li class="nav-item">
  44.                             <a class="nav-link" href="{{ path('contact') }}">Contact</a>
  45.                         </li>
  46.                     </ul>
  47.                 </div>
  48.             </nav>
  49.         </div>
  50.         <div class="d-block d-md-none">
  51.             <nav role="navigation" class="stroke py-3">
  52.                 <div class="d-flex justify-content-between align-items-center gap-1">
  53.                     <a href="{{ path('homepage') }}">
  54.                         <div class="logo">
  55.                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.81 85.37">
  56.                                 <defs>
  57.                                     <style>.svg-logo {
  58.                                             fill: #181a35;
  59.                                         }</style>
  60.                                 </defs>
  61.                                 <g id="Calque_2" data-name="Calque 2">
  62.                                     <g id="Calque_1-2" data-name="Calque 1">
  63.                                         <path class="svg-logo"
  64.                                               d="M61,71.88q-.24,10.43-7.73,10.43H34.86q-6.73,0-7.61-8.41v-3a17.27,17.27,0,0,0-2.73-9.77A17.27,17.27,0,0,0,17.27,55a23.66,23.66,0,0,0-10-2.09V67a48.64,48.64,0,0,1-.84,9.78Q4.93,83.57,0,83.57v1.8H64.81V66H61.15Q61.15,68.88,61,71.88Z"/>
  65.                                         <path class="svg-logo"
  66.                                               d="M6.59,7a28,28,0,0,1,.66,6.9A16.25,16.25,0,0,0,10,23.5a16.27,16.27,0,0,0,7.26,5.73,26,26,0,0,0,10,1.88V12.59a23,23,0,0,1,.57-5.25,8,8,0,0,1,2.12-3.95,6.25,6.25,0,0,1,4.56-1.53V0H0V1.86Q5.22,1.86,6.59,7Z"/>
  67.                                         <path class="svg-logo logo-star"
  68.                                               d="M17.84,39,10,32l4.2,9.55-6.9,7.73,9.56-4.2,7.54,6.73-4.08-9.29c2-2.3,6.8-7.63,6.8-7.63Z"/>
  69.                                     </g>
  70.                                 </g>
  71.                             </svg>
  72.                         </div>
  73.                     </a>
  74.                     <a class="header-subtitle" href="{{ path('homepage') }}">
  75.                         In Numerus Veritas
  76.                     </a>
  77.                     <span id="burger-icon">
  78.                         <svg id="burger-icon-default" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px"
  79.                              viewBox="0 0 24 24"
  80.                              fill="none">
  81.                         <path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
  82.                         <path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
  83.                         <path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
  84.                         </svg>
  85.                         <svg id="burger-icon-opened" class="d-none" xmlns="http://www.w3.org/2000/svg" fill="#000000"
  86.                              width="32px"
  87.                              height="32px"
  88.                              viewBox="0 0 32 32"><path
  89.                                     d="M 7.21875 5.78125 L 5.78125 7.21875 L 14.5625 16 L 5.78125 24.78125 L 7.21875 26.21875 L 16 17.4375 L 24.78125 26.21875 L 26.21875 24.78125 L 17.4375 16 L 26.21875 7.21875 L 24.78125 5.78125 L 16 14.5625 Z"/></svg>
  90.                     </span>
  91.                 </div>
  92.                 <div id="responsive-menu" class="text-center d-flex align-items-center">
  93.                     <ul class="mt-5 text-deepblue navbar-nav d-flex flex-column justify-content-start align-items-start">
  94.                         <li class="nav-item">
  95.                             <a class="nav-link" href="{{ path('test') }}">Mon thème</a>
  96.                         </li>
  97.                         <li class="nav-item">
  98.                             <a class="nav-link" href="{{ path('numbers') }}">La numérologie</a>
  99.                         </li>
  100.                         <li class="nav-item">
  101.                             <a class="nav-link" href="{{ path('about') }}">À propos</a>
  102.                         </li>
  103.                         <li class="nav-item">
  104.                             <a class="nav-link" href="{{ path('contact') }}">Contact</a>
  105.                         </li>
  106.                     </ul>
  107.                 </div>
  108.             </nav>
  109.         </div>
  110.     </div>
  111. </div>
  113. <script>
  115.     document.addEventListener('DOMContentLoaded', function () {
  116.             let burgerIcon = document.getElementById("burger-icon");
  117.             let burgerIconDefault = document.getElementById("burger-icon-default");
  118.             let burgerIconOpened = document.getElementById("burger-icon-opened");
  119.             let responsiveMenu = document.getElementById("responsive-menu");
  120.             burgerIcon.addEventListener('click', () => {
  121.                 if (responsiveMenu.classList.contains('open')) {
  122.                     // close it
  123.                     responsiveMenu.classList.remove('open')
  124.                     //change icon
  125.                     burgerIconDefault.classList.remove('d-none');
  126.                     burgerIconOpened.classList.add('d-none');
  127.                 } else {
  128.                     //open it
  129.                     responsiveMenu.classList.add('open')
  130.                     //change icon
  131.                     burgerIconDefault.classList.add('d-none');
  132.                     burgerIconOpened.classList.remove('d-none');
  133.                 }
  134.             })
  135.         },
  136.         false
  137.     )
  140. </script>