templates/front/partials/menu/header-primary.html.twig line 1

Open in your IDE?
  1. {% macro menu_links(items, depth) %}
  2.     {% import _self as macros %}
  3.     {% for item in items %}
  4.         <li js-header-main-item>
  5.         {% if item.children is defined and item.children is not null and item.children|length > 0 %}
  6.             <button class="header-main-nav__item header-main-nav__item--level0" js-header-toggle-panel="level0">
  7.                 {{item.label}}
  8.                 <svg width="16" height="9" class="icon ml-2 shrink-0 hidden xl:block">
  9.                     <use href="#icon-arrow-down" xlink:href="#icon-arrow-down"></use>
  10.                 </svg>
  11.                 <svg width="12" height="20" class="icon icon--white opacity-50 ml-2 shrink-0 xl:hidden">
  12.                     <use href="#icon-chevron-right-2" xlink:href="#icon-chevron-right-2"></use>
  13.                 </svg>
  14.             </button>
  15.             <div class="panel panel--level1" js-header-panel>
  16.                 <div class="panel__inner">
  17.                     <div class="fluid-grid pt-9 xl:pt-0">
  18.                         <button class="bt-back only-mobile" js-header-back>
  19.                             <svg width="8" height="16" class="icon opacity-70 mr-2 shrink-0">
  20.                                 <use href="#icon-chevron-right" xlink:href="#icon-chevron-right"></use>
  21.                             </svg>
  22.                             Retour
  23.                         </button>
  24.                         <ul class="xl:pt-3 pb-8 xl:pb-0">
  25.                             {{ macros.menu_links2(item.children, (depth+1) ) }}
  26.                         </ul>
  27.                     </div>
  28.                 </div>
  29.             </div>
  30.         {% else %}
  31.             <a class="header-main-nav__item header-main-nav__item--level0" href="{% if item.page %}{{ page_url(item.page, 'front') }}{% else %}{{ item.link }}{% endif %}">{{ item.label }}</a>
  32.         {% endif %}
  33.         </li>
  34.     {% endfor %}
  35. {% endmacro %}
  37. {% macro menu_links2(items, depth) %}
  38.     {% import _self as macros %}
  39.     {% for item in items %}
  40.         <li class="header-main-nav__item-wrap">
  41.             {% if item.children is defined and item.children is not null and item.children|length > 0 %}
  42.                 <button class="header-main-nav__item header-main-nav__item--level1 only-mobile" js-header-toggle-panel>
  43.                     {{item.label}}
  44.                     <svg width="12" height="20" class="icon icon--white opacity-50 ml-2 shrink-0">
  45.                         <use href="#icon-chevron-right-2" xlink:href="#icon-chevron-right-2"></use>
  46.                     </svg>
  47.                 </button>
  48.                 <div class="panel panel--level2 w-full p-8 xl:p-0" js-header-panel>
  49.                     <button class="bt-back col-12 flex items-center font-weight-bold text-white uppercase opacity-70 only-mobile" js-header-back>
  50.                         <svg width="8" height="16" class="icon opacity-70 mr-2 shrink-0">
  51.                             <use href="#icon-chevron-right" xlink:href="#icon-chevron-right"></use>
  52.                         </svg>
  53.                         Retour
  54.                     </button>
  55.                     <a target="{{ item.target }}" rel="noopener" href="{% if item.page %}{{ page_url(item.page, 'front') }}{% else %}{{ item.link }}{% endif %}" class="header-main-nav__item header-main-nav__item--level1 mt-8 xl:mt-0 mb-2 xl:mb-0 {{ item.class }}">
  56.                         {{item.label}}
  57.                         <div class="picto relative ml-2 inline-block">
  58.                             <svg class="icon icon--white abs-center">
  59.                                 <use href="#icon-arrow" xlink:href="#icon-arrow"></use>
  60.                             </svg>
  61.                         </div>
  62.                     </a>
  63.                     <ul class="list-none xl:mt-4">
  64.                         {{ macros.menu_links3(item.children, (depth+1) ) }}
  65.                     </ul>
  66.                 </div>
  67.             {% else %}
  68.             <a target="{{ item.target }}" href="{% if item.page %}{{ page_url(item.page, 'front') }}{% else %}{{ item.link }}{% endif %}" class="header-main-nav__item header-main-nav__item--level1">
  69.                 {{item.label}}
  71.                 <div class="picto relative ml-2 hidden xl:inline-block">
  72.                     <svg class="icon icon--white abs-center">
  73.                         <use href="#icon-arrow" xlink:href="#icon-arrow"></use>
  74.                     </svg>
  75.                 </div>
  76.             </a>
  77.             {% endif %}
  78.         </li>
  79.     {% endfor %}
  80. {% endmacro %}
  82. {% macro menu_links3(items, depth) %}
  83.     {% import _self as macros %}
  84.     {% for item in items %}
  85.        <li>
  86.             <a target="{{ item.target }}" rel="noopener" href="{% if item.page %}{{ page_url(item.page, 'front') }}{% else %}{{ item.link }}{% endif %}" class="header-main-nav__item--level2 inline-flex justify-between xl:justify-start items-start xl:items-center font-weight-regular mt-4 xl:mt-0 {% if item.class is defined and item.class is not null %}{{item.class}}{% endif %}">
  87.                 <div class="picto relative shrink-0 mr-3 only-desktop">
  88.                     <svg width="7" height="12" class="icon shrink-0 abs-center">
  89.                         <use href="#icon-chevron-right" xlink:href="#icon-chevron-right"></use>
  90.                     </svg>
  91.                 </div>
  92.                 <span>{{item.label}}</span>
  93.             </a>
  94.         </li>
  95.     {% endfor %}
  96. {% endmacro %}
  98. {% import _self as macros %}
  100. <ul class="list-none flex flex-col xl:flex-row w-full xl:w-auto h-full px-8 xl:px-0 py-16 xl:py-0">
  101.     {% set depth = 1 %}
  102.     {{ macros.menu_links(menu.items, depth) }}
  103.     <li class="flex items-center">
  104.         <a href="{{ app.user ? page_url('publications-list-adherent','front') : page_url('login','front') }}" class="button button--rounded button--rounded--S button--green">
  105.             <svg width="12" height="15" class="icon mr-2">
  106.                 <use href="#icon-profile" xlink:href="#icon-profile"></use>
  107.             </svg>
  108.             Espace adhérent
  109.         </a>
  110.     </li>
  111. </ul>