templates/includes/header-nav.html.twig line 1

  1. {% set header = content.headerType %}
  2. <header class="header header--{{ header }}" x-data="header">
  3.     <div class="header__container">
  4.         <a href="{{ sulu_content_root_path() }}" class="header__logo">
  5.             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 62">
  6.                 <path d="M198.1 40.178L177.27 0h-14.969v61.223h13.668V21.045l20.83 40.178h14.97V0H198.1v40.178zm96.811-24.92c-2.066-4.608-5.245-8.303-9.556-11.085C281.034 1.39 275.68 0 269.283 0h-23.354v61.223l48.137-13.793c.269-.499.517-.998.755-1.518 2.116-4.64 3.169-9.737 3.169-15.311.01-5.617-1.023-10.724-3.079-15.343zM282.623 39.53c-1.142 2.75-2.851 4.97-5.125 6.658-2.275 1.677-5.047 2.516-8.295 2.516h-9.595V12.52h9.595c3.258 0 6.02.838 8.295 2.527 2.274 1.677 3.983 3.896 5.125 6.646 1.143 2.75 1.709 5.723 1.709 8.92 0 3.185-.566 6.158-1.709 8.918zM74.927 0H61.26l-8.056 61.223H90.95l1.629-12.519H68.5L74.927 0zm42.127 0L95.579 61.223h14.313l3.656-11.478h23.929l3.656 11.478h14.324L133.981 0h-16.927zm.269 37.916l8.195-25.737 8.195 25.737h-16.39zM44.71 2.654C41.58.881 37.558 0 32.62 0H8.056L0 61.223h13.668l2.762-20.875h12.208c4.34 0 8.215-.945 11.632-2.824 3.417-1.88 6.158-4.396 8.215-7.518 2.056-3.132 3.337-6.52 3.824-10.172.487-3.705.12-7.06-1.103-10.044-1.212-2.995-3.387-5.373-6.496-7.136zm-6.149 17.87c-.328 2.432-1.44 4.375-3.337 5.83-1.898 1.454-4.262 2.176-7.083 2.176H17.98l2.116-16h10.172c2.93 0 5.135.668 6.625 1.995 1.49 1.338 2.047 3.334 1.67 6z"
  7.                       fill="currentColor"/>
  8.             </svg>
  9.         </a>
  10.         <div class="header__nav">
  11.             <div class="header__nav-center">
  12.                 {# <!-- Fly-Out Navigation --> #}
  13.                 {% set flyout = flyout() %}
  14.                 {% set currentFlyout = (flyout is not empty and flyout[app.request.locale] is defined) ? flyout[app.request.locale] : [] %}
  15.                 {% set flyoutPages = currentFlyout is not empty ? currentFlyout|keys : [] %}
  16.                 <!-- {{ flyoutPages|join(' --- ') }} -->
  18.                 {# <!-- Fallback --> #}
  19.                 {% if flyout is empty %}
  20.                     <nav class="header-nav">
  21.                         {% for item in sulu_navigation_root_tree('main') %}
  22.                             {% set itemUrl = sulu_content_path(item.url) %}
  23.                             <a class="header-nav__link {{ app.request.uri starts with itemUrl ? 'active' : '' }}"
  24.                                href="{{ sulu_content_path(item.url, item.webspaceKey) }}"
  25.                                title="{{ item.title }}">{{ item.title }}</a>
  26.                         {% endfor %}
  27.                     </nav>
  28.                 {% else %}
  29.                     <nav class="flyout-nav" x-data="flyoutnav">
  30.                         {% set mainNavigation = sulu_navigation_root_tree('main') %}
  31.                         {% for item in mainNavigation %}
  32.                             {% set itemUrl = sulu_content_path(item.url) %}
  33.                             {% set activeNav = app.request.uri starts with itemUrl ? 'active' : '' %}
  35.                             {# <!-- Flyout --> #}
  36.                             {% if flyoutPages is not empty and item.url in flyoutPages %}
  37.                                 <div class="flyout-nav__item {{ activeNav }}" data-flyout title="{{ item.title }}">
  38.                                     {{ item.title }}
  39.                                 </div>
  40.                             {% else %}
  41.                                 {# <!-- Without Flyout - Normal navigation --> #}
  42.                                 <a class="flyout-nav__item {{ activeNav }}"
  43.                                    href="{{ sulu_content_path(item.url, item.webspaceKey) }}" hreflang="{{ app.request.locale }}"
  44.                                    title="{{ item.title }}">{{ item.title }}
  45.                                 </a>
  46.                             {% endif %}
  47.                         {% endfor %}
  49.                         {# <!-- Navigation contents --> #}
  50.                         {% if currentFlyout is not empty %}
  51.                             <div class="flyout-nav__flyout" x-ref="flyout">
  52.                                 <div class="flyout-nav__flyout-inner" x-ref="flyoutInner">
  53.                                     <div class="flyout-nav__background" x-ref="background">
  54.                                         <div class="flyout-nav__arrow" x-ref="arrow"></div>
  55.                                     </div>
  57.                                     {% for item in mainNavigation %}
  58.                                         {% if item.url in flyoutPages %}
  59.                                             {% set flyoutPage = currentFlyout[item.url] %}
  60.                                             {% if flyoutPage['layout'] == 'Layout 1' %}
  61.                                                 {% include '/includes/navigation/layout1.html.twig' %}
  62.                                             {% elseif flyoutPage['layout'] == 'Layout 2' %}
  63.                                                 {% include 'includes/navigation/layout2.html.twig' %}
  64.                                             {% else %}
  65.                                                 {% include 'includes/navigation/layout3.html.twig' %}
  66.                                             {% endif %}
  67.                                         {% endif %}
  68.                                     {% endfor %}
  69.                                 </div>
  70.                             </div>
  71.                         {% endif %}
  72.                     </nav>
  73.                 {% endif %}
  74.             </div>
  75.             <div class="header__nav-right">
  76.                 <div class="languageswitch" x-data="languageswitch">
  77.                     <div class="languageswitch__button">
  78.                         <span class="languageswitch__button-inner">
  79.                             <span class="languageswitch__button-arrow">
  80.                                <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
  81.                                  <path d="M7.5 14.5c1.657 0 3-3.134 3-7s-1.343-7-3-7-3 3.134-3 7 1.343 7 3 7ZM.5 7.5h14"
  82.                                        stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
  83.                                  <path d="M7.5 14.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" stroke="currentColor" stroke-linecap="round"
  84.                                        stroke-linejoin="round"/>
  85.                                </svg>
  86.                             </span>
  87.                             {{ app.request.getLocale()|upper }}
  88.                         </span>
  89.                         <select class="languageswitch__select" x-ref="select">
  90.                             {% for localization in localizations %}
  91.                                 <option value="{{ localization.url }}"
  92.                                         {% if localization.locale == app.request.getLocale() %} selected {% endif %}>
  93.                                     {{ localization.locale|upper }}
  94.                                 </option>
  95.                             {% endfor %}
  96.                         </select>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.         </div>
  101.         <div class="header__actions">
  102.             <div class="languageswitch" x-data="languageswitch">
  103.                 <div class="languageswitch__button">
  104.                         <span class="languageswitch__button-inner">
  105.                             <span class="languageswitch__button-arrow">
  106.                                <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
  107.                                  <path d="M7.5 14.5c1.657 0 3-3.134 3-7s-1.343-7-3-7-3 3.134-3 7 1.343 7 3 7ZM.5 7.5h14"
  108.                                        stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
  109.                                  <path d="M7.5 14.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" stroke="currentColor" stroke-linecap="round"
  110.                                        stroke-linejoin="round"/>
  111.                                </svg>
  112.                             </span>
  113.                             {{ app.request.getLocale()|upper }}
  114.                         </span>
  115.                     <select class="languageswitch__select" x-ref="select">
  116.                         {% for localization in localizations %}
  117.                             <option value="{{ localization.url }}"
  118.                                     {% if localization.locale == app.request.getLocale() %} selected {% endif %}>
  119.                                 {{ localization.locale|upper }}
  120.                             </option>
  121.                         {% endfor %}
  122.                     </select>
  123.                 </div>
  124.             </div>
  125.             <a href="#" class="header__action" @click="showMobileNav = true">
  126.                 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  127.                     <path d="M1.5 2.5h14" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round"
  128.                           stroke-linejoin="round"/>
  129.                     <path d="M1.5 8.5h14M1.5 14.5h14" stroke="currentColor" stroke-miterlimit="10"
  130.                           stroke-linecap="round" stroke-linejoin="round"/>
  131.                 </svg>
  132.             </a>
  133.         </div>
  134.     </div>
  135.     <div class="header__mobile-nav">
  136.         {{ include('/includes/mobile-nav.html.twig') }}
  137.     </div>
  138. </header>