templates/front/partials/header.html.twig line 1

Open in your IDE?
  1. <header class="app-header {{ hasTransparentHeader is defined ? 'app-header--transparent' : '' }}" js-header>
  2.     <div class="header-mobile relative  py-4 only-mobile">
  3.         <div class="fluid-grid flex justify-between items-center">
  4.             <!-- Logo -->
  5.             <a href="/" class="logo inline-block" title="logo CGF" aria-hidden="true">
  6.                 <svg width="100" height="33" class="icon icon-logo">
  7.                     <use href="#logo-cgf" xlink:href="#logo-cgf"></use>
  8.                 </svg>
  9.             </a>
  10.             <button class="bt-burger" js-burger>
  11.                 <svg width="26" height="19" class="icon icon-burger">
  12.                     <use href="#icon-burger" xlink:href="#icon-burger"></use>
  13.                 </svg>
  14.                 <svg width="20" height="20" class="icon icon-cross">
  15.                     <use href="#icon-cross" xlink:href="#icon-cross"></use>
  16.                 </svg>
  17.                 <span class="sr-only">Menu</span>
  18.             </button>
  19.         </div>
  20.     </div>
  21.     <div class="fluid-grid">
  22.         <div class="header-wrapper flex flex-col xl:flex-row xk:justify-between xl:flex-wrap" js-header-nav-wrapper>
  23.             <div class="circle absolute right-0 bottom-0 z-1 only-mobile"></div>
  24.             <div class="baseline-n-search relative flex flex-col xl:flex-row shrink-0">
  25.                 <div class="baseline flex items-center only-desktop">Confédération des Grossistes de France</div>
  26.                 
  27.                 {# SEARCH #}
  28.                 <div class="search-wrapper grow px-6 py-4" js-search-panel>
  29.                     <div class="relative z-2 flex items-center">
  30.                         <svg width="21" height="21" class="icon icon--white mr-4">
  31.                             <use href="#icon-search" xlink:href="#icon-search"></use>
  32.                         </svg>
  33.     
  34.                         <div class="w-full leading-none" js-search-panel-searchbox>
  35.                             {# replace by algolia widget on focus #}
  36.                             <label for="search-input-bar" class="sr-only">Rechercher</label>
  37.                             <input class="grow" type="search" name="search-input-bar" id="search-input-bar" placeholder="Rechercher un document, une actualité…" js-search-panel-origin-input>
  38.                         </div>
  39.                     </div>
  41.                     <div class="search-panel is-hidden" js-search-panel-panel>
  42.                         <button class="search-panel__close" js-search-panel-close>
  43.                             <svg width="24" height="24" class="icon icon--white">
  44.                                 <use href="#icon-cross" xlink:href="#icon-cross"></use>
  45.                             </svg>
  46.                             <span class="sr-only">Fermer</span>
  47.                         </button>
  48.                         <div class="search-panel__top"></div>
  50.                         <div class="search-panel__bottom" js-simplebar="{screens: {min: 'xl'}}">
  51.                             <div class="fluid-grid pb-8 lg:pb-20" js-search-panel-results>
  52.                                 
  53.                             </div>
  54.                         </div>
  55.                     </div>
  56.                 </div>
  57.             </div>
  58.             {{ menu('header-secondary', app.request.locale) }}
  59.             <a href="/" class="logo-desktop relative inline-block only-desktop xl:order-2">
  60.                 <svg width="140" height="46" class="icon icon--orange icon-logo">
  61.                     <use href="#logo-cgf" xlink:href="#logo-cgf"></use>
  62.                 </svg>
  63.                 <span class="sr-only">CGF</span>
  64.             </a>
  65.             <nav class="header-main-nav relative flex justify-end items-center grow xl:pr-10 order-1 xl:order-2" js-header-main-nav>
  66.                 {{ menu('header-primary', app.request.locale) }}
  67.             </nav>
  68.         </div>
  69.     </div>
  70. </header>