src/Frontend/Themes/Web/Core/Layout/Templates/Header.html.twig line 1

Open in your IDE?
  1. {% import 'Core/Layout/Templates/Macro/Replace.html.twig' as txt %}
  2. {% import 'Core/Layout/Templates/Macro/Wave.html.twig' as wave %}
  3. <header id="header" class="header" :class="{ 'header--fixed': scrollTop }" @scroll.window="scrollTop = (window.pageYOffset < 64) ? false: true">
  4.     <div class="header__wrap">
  5.         <div class="center">
  6.             <div class="header__main" x-data="{ open: false }">
  7.                 <div class="header__logo">
  8.                     <a href="{% if page.id == '1' %}#{{ webName }}{% else %}/{% endif %}" aria-label="{{ siteTitle }}">
  9.                         <img src="{{ THEME_URL }}/Core/Layout/assets/img/logo.svg" alt="{{ siteTitle }}">
  10.                     </a>
  11.                 </div>
  12.                 <div class="header__menu">
  13.                     <nav>
  14.                         <ul class="level-1">{{ getnavigation('page', 0, 1) }}</ul>
  15.                     </nav>
  16.                 </div>
  17.                 {% if SITE_MULTILANGUAGE %}
  18.                     <div class="header__locale">{% include "Core/Layout/Templates/Languages.html.twig" %}</div>
  19.                 {% endif %}
  20.                 <div class="navigation" :class="{ 'open': open }">
  21.                     <div class="navigation__top">
  22.                         {% if SITE_MULTILANGUAGE %}
  23.                             <div class="navigation__locale">{% include "Core/Layout/Templates/Languages.html.twig" %}</div>
  24.                         {% endif %}
  25.                     </div>
  26.                     <div class="navigation__main">
  27.                         <div class="navigation__contact">
  28.                             {{ userDefinedGlobals.helpline|raw }}
  29.                             <div class="xl:flex xl:justify-between">
  30.                                 <p class="xl:w-1/2">
  31.                                     <span class="block uppercase">{{ 'lbl.Email'|trans }}</span>
  32.                                     <a href="mailto:{{ userDefinedGlobals.email }}">{{ userDefinedGlobals.email }}</a>
  33.                                 </p>
  34.                                 <p class="xl:w-1/2">
  35.                                     <span class="block uppercase">{{ 'lbl.Phone'|trans }}</span>
  36.                                     <a href="tel:{{ userDefinedGlobals.phone|replace({' ':''}) }}" class="phone">{{ userDefinedGlobals.phone }}</a>
  37.                                 </p>
  38.                             </div>
  39.                             {{ userDefinedGlobals.menuButton|raw }}
  40.                             <div class="navigation__social">{% for footerSocial in positions.footerSocial %}{% if footerSocial.html %}{{ txt.replace(footerSocial.html) }}{% endif %}{% endfor %}</div>
  41.                         </div>
  42.                         {% block navigation %}
  43.                             <nav class="nav" id="nav">
  44.                                 <ul class="level-1">{{ getnavigation('page', 0, 1) }}</ul>
  45.                             </nav>
  46.                         {% endblock %}
  47.                         <nav class="navigation__brands">
  48.                             {% for footerBrands in positions.footerBrands %}{% if footerBrands.html %}{{ txt.replace(footerBrands.html) }}{% endif %}{% endfor %}
  49.                         </nav>
  50.                     </div>
  51.                     <div class="navigation__wave">
  52.                         {{ wave.wave('bottom','-bottom-16','fill-red stroke-[10px] stroke-red-dark -top-2.5') }}
  53.                     </div>
  54.                 </div>
  55.                 <button type="button" class="nav__button" aria-controls="nav" aria-label="{{ 'lbl.NavToggle'|trans }}" x-on:click="open = ! open" :class="{ 'open': open }" x-ref="navToggle" @click="$refs.navToggle.blur()">
  56.                     <span class="nav__button__burger">
  57.                         <span class="top"></span>
  58.                         <span class="middle"></span>
  59.                         <span class="bottom"></span>
  60.                     </span>
  61.                     <span class="nav__button__label" x-text="open ? '{{ 'lbl.Close'|trans }}' : '{{ 'lbl.Menu'|trans }}'">{{ 'lbl.Menu'|trans }}</span>
  62.                 </button>
  63.             </div>
  64.         </div>
  65.     </div>
  66. </header>