templates/vitrine/lexend/components/header.html.twig line 1

Open in your IDE?
  1. {% set menuHeader = getMenuWebsiteLocaleArray(app.request.locale,"header",connectUser) %}
  2. {% set menuHeader2 = getMenuWebsiteLocaleArray(app.request.locale,"header-right",connectUser) %}
  4. {% if page is defined %}
  5.     {% set navname = page.navbar %}
  6. {% else %}
  7.     {% set navname = "default" %}
  8. {% endif %}
  11. {% if navname == "default" %}
  12.     <header class="uc-header header-global uc-navbar-sticky-wrap z-999">
  13.         <nav class="uc-navbar-container uc-navbar-transparent uc-navbar-float ft-tertiary z-1">
  14.             <div class="uc-navbar-main">
  15.                 <div class="container max-w-lg lg:max-w-950px xl:max-w-xl">
  16.                     <div class="uc-navbar min-h-56px lg:min-h-100px px-2 lg:px-0 text-gray-900 dark:text-white">
  17.                         <div class="uc-navbar-left">
  18.                             <div class="uc-logo">
  19.                                 <a class="panel text-none" href="{% if app.request.locale == default_locale %}{{ path('homepage') }}{% else %}{{ path('locale_homepage',{'_locale':app.request.locale}) }}{% endif %}" style="width: {{ logo_width }}px">
  20.                                     <img class="text-primary dark:text-tertiary" src="{{ logo }}" alt="{{ websitename }}" width="{{ logo_width }}" height="{{ logo_height }}" data-uc-svg>
  21.                                 </a>
  22.                             </div>
  23.                         </div>
  24.                         <div class="uc-navbar-center d-none xl:d-flex">
  25.                             <ul class="uc-navbar-nav gap-4 xl:gap-5 d-none lg:d-flex fs-5 fw-bold" style="--uc-nav-height: 48px">
  26.                                 {% if menuHeader is not empty %}
  27.                                     {% for m in  menuHeader %}
  28.                                         {% if m.link != "#" %}
  29.                                             <li><a href="{{ m.link }}" {% if m.targetBlank == 1%}target="_blank"{% endif %}>{{ m.title }}</a></li>
  30.                                         {% else %}
  31.                                             {% set itemsLink = getMenuWebsiteItems(m.id) %}
  32.                                             <li>
  33.                                                 <a href="#">{{ m.title }} <span data-uc-navbar-parent-icon></span></a>
  34.                                                 <div class="uc-navbar-dropdown w-600px ft-primary text-unset fs-6 fw-normal p-0 hide-scrollbar rounded-2 overflow-hidden" data-uc-drop="mode: click; offset: 0; boundary: !.uc-navbar; animation: uc-animation-slide-top-small; duration: 150;">
  35.                                                     <div class="row child-cols-6 g-0 col-match" data-uc-grid>
  36.                                                         <div>
  37.                                                             <ul class="uc-nav uc-navbar-dropdown-nav p-2">
  38.                                                                 {% for itl in itemsLink %}
  39.                                                                     <li>
  40.                                                                         <a class="hstack items-start gap-2 p-2 hover:bg-gray-600 hover:bg-opacity-5 dark:hover:bg-white duration-150 rounded-1-5" href="{{ itl.link }}"  aria-label="{{ itl.title }}" title="{{ itl.title }}">
  41.                                                                             {% if itl.linkPicture is not empty %}<img src="{{ itl.linkPicture }}" width="20" style="margin-top:-2px;" />{% endif %}
  42.                                                                             <span class="vstack gap-narrow mt-nnarrow">
  43.                                                                             <span class="fw-bold dark:text-white">{{ itl.title }}</span>
  44.                                                                             {% if itl.description is not empty %}<span class="fw-normal">{{ itl.description }}</span>{% endif %}
  45.                                                                         </span>
  46.                                                                         </a>
  47.                                                                     </li>
  48.                                                                 {% endfor %}
  49.                                                             </ul>
  50.                                                         </div>
  51.                                                         {% if m.submenuHTML is not empty %}
  52.                                                             <div>
  53.                                                                 <ul class="uc-nav uc-navbar-dropdown-nav p-2 h-100 bg-gray-25 dark:bg-gray-300 dark:bg-opacity-5">
  54.                                                                     {{ m.submenuHTML|raw }}
  55.                                                                 </ul>
  56.                                                             </div>
  57.                                                         {% endif %}
  58.                                                     </div>
  59.                                                 </div>
  60.                                             </li>
  61.                                         {% endif %}
  62.                                     {% endfor %}
  63.                                 {% endif %}
  64.                             </ul>
  65.                         </div>
  66.                         <div class="uc-navbar-right">
  67.                             <div class="d-inline-block">
  68.                                 <ul class="uc-navbar-nav gap-3 xl:gap-4 d-none lg:d-flex fw-medium ltr:ms-2 ltr:xl:ms-4 rtl:me-2 rtl:xl:me-4">
  69.                                     {% block header_content %}
  70.                                         {% set translationsPaths = app.session.get('translations_paths') %}
  71.                                         {% if translationsPaths is not null %}
  72.                                             <li class="d-inline-block">
  73.                                                 <a href="#" class="hstack gap-1 text-none fw-medium" role="button" aria-haspopup="true" aria-expanded="true">
  74.                                                     <i class="icon icon-1 unicon-wikis"></i>
  75.                                                     <span>{{ app.request.locale }}</span>
  76.                                                 </a>
  77.                                                 <div class="w-200px py-1 bg-white dark:bg-gray-700 shadow-xs rounded-2 " data-uc-drop="mode: click; offset: 0; pos: top-right; boundary: !.uc-navbar-container; animation: uc-animation-slide-top-small; duration: 150;" style="top: 100px; left: 889.023px; max-width: 2017px;">
  78.                                                     <ul class="nav-y gap-0 fs-7">
  79.                                                         {% for key, value in translationsPaths %}
  80.                                                             {% if key == "en" %}
  81.                                                                 <li>
  82.                                                                     <a href="{{ value }}" class="w-100 p-1 px-2 hover:bg-gray-600 hover:bg-opacity-5 dark:hover:bg-white duration-150">
  83.                                                                         <img class="w-20px rounded-1 me-1 rtl:me-0 rtl:ms-1" src="/assets/lexend/images/common/en.svg" alt="{{ "Anglais"|translateLocale(arrayTranslate) }}" /> {{ "Anglais"|translateLocale(arrayTranslate) }}
  84.                                                                     </a>
  85.                                                                 </li>
  86.                                                             {% endif %}
  87.                                                             {% if key == "fr" %}
  88.                                                                 <li>
  89.                                                                     <a href="{{ value }}" class="w-100 p-1 px-2 hover:bg-gray-600 hover:bg-opacity-5 dark:hover:bg-white duration-150">
  90.                                                                         <img class="w-20px rounded-1 me-1 rtl:me-0 rtl:ms-1" src="/assets/lexend/images/common/fr.svg" alt="{{"Français"|translateLocale(arrayTranslate)}}" /> {{"Français"|translateLocale(arrayTranslate)}}
  91.                                                                     </a>
  92.                                                                 </li>
  93.                                                             {% endif %}
  94.                                                             {% if key == "de" %}
  95.                                                                 <li>
  96.                                                                     <a href="{{ value }}" class="w-100 p-1 px-2 hover:bg-gray-600 hover:bg-opacity-5 dark:hover:bg-white duration-150">
  97.                                                                         <img class="w-20px rounded-1 me-1 rtl:me-0 rtl:ms-1" src="/assets/lexend/images/common/de.svg" alt="{{ "Allemand"|translateLocale(arrayTranslate) }}" /> {{ "Allemand"|translateLocale(arrayTranslate) }}
  98.                                                                     </a>
  99.                                                                 </li>
  100.                                                             {% endif %}
  101.                                                         {% endfor %}
  102.                                                     </ul>
  103.                                                 </div>
  104.                                             </li>
  105.                                         {% endif %}
  106.                                     {% endblock header_content %}
  108.                                     {% if menuHeader2 is not empty %}
  109.                                         {% for m in menuHeader2 %}
  110.                                             {% if m.typeButton == "download" %}
  111.                                                 <li>
  112.                                                     <a href="{{ m.link }}" {% if m.targetBlank == 1%}target="_blank"{% endif %} title="{{ m.title }}" class="btn btn-md btn-primary border-0 px-3 lg:d-inline-flex" style="color:white !important;">
  113.                                                         {{ m.title }}
  114.                                                     </a>
  115.                                                 </li>
  116.                                             {% else %}
  117.                                                 <li>
  118.                                                     <a href="{{ m.link }}" {% if m.targetBlank == 1%}target="_blank"{% endif %} title="{{ m.title }}">{{ m.title }}</a>
  119.                                                 </li>
  120.                                             {% endif %}
  121.                                         {% endfor %}
  122.                                     {% endif %}
  123.                                 </ul>
  124.                                 <a class="d-block lg:d-none" href="#uc-menu-panel" data-uc-navbar-toggle-icon data-uc-toggle></a>
  125.                             </div>
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.         </nav>
  131.     </header>
  132. {% endif %}
  134. {% if navname == "secondary" %}
  135.     <header class="uc-header header-six uc-navbar-sticky-wrap z-999 uc-sticky" data-uc-sticky="start: 300px; animation: uc-animation-slide-top; sel-target: .uc-navbar-container; cls-active: uc-navbar-sticky; cls-inactive: uc-navbar-transparent; end: !*;">
  136.         <nav class="uc-navbar-container lg:mt-3 rounded-0 lg:rounded-pill uc-navbar-float ft-tertiary z-1 uc-navbar-transparent">
  137.             <div class="uc-navbar-main">
  138.                 <div class="container max-w-lg lg:max-w-950px xl:max-w-xl">
  139.                     <div class="uc-navbar min-h-64px lg:min-h-80px px-2 lg:px-0 text-gray-900 dark:text-white" data-uc-navbar="mode: click; animation: uc-animation-slide-top-small; duration: 150;">
  140.                         <div class="uc-navbar-left">
  141.                             <div class="uc-logo">
  142.                                 <a class="panel text-none" href="{% if app.request.locale == default_locale %}{{ path('homepage') }}{% else %}{{ path('locale_homepage',{'_locale':app.request.locale}) }}{% endif %}" style="width: {{ logo_width }}px">
  143.                                     <img class="text-primary dark:text-tertiary" src="{{ logo }}" alt="{{ websitename }}" width="{{ logo_width }}" height="{{ logo_height }}" data-uc-svg>
  144.                                 </a>
  145.                             </div>
  146.                         </div>
  147.                         <div class="uc-navbar-center">
  148.                             <ul class="uc-navbar-nav gap-3 xl:gap-5 d-none lg:d-flex fs-5 fw-medium" data-uc-scrollspy-nav="closest: li; offset: 40; scroll: true">
  149.                                 {% if menuHeader is not empty %}
  150.                                     {% for m in  menuHeader %}
  151.                                         {% if m.link != "#" %}
  152.                                             <li><a href="{{ m.link }}" {% if m.targetBlank == 1%}target="_blank"{% endif %}>{{ m.title }}</a></li>
  153.                                         {% else %}
  154.                                             {% set itemsLink = getMenuWebsiteItems(m.id) %}
  155.                                             <li>
  156.                                                 <a href="#">{{ m.title }} <span data-uc-navbar-parent-icon></span></a>
  157.                                                 <div class="uc-navbar-dropdown w-600px ft-primary text-unset fs-6 fw-normal p-0 hide-scrollbar rounded-2 overflow-hidden" data-uc-drop="mode: click; offset: 0; boundary: !.uc-navbar; animation: uc-animation-slide-top-small; duration: 150;">
  158.                                                     <div class="row child-cols-6 g-0 col-match" data-uc-grid>
  159.                                                         <div>
  160.                                                             <ul class="uc-nav uc-navbar-dropdown-nav p-2">
  161.                                                                 {% for itl in itemsLink %}
  162.                                                                     <li>
  163.                                                                         <a class="hstack items-start gap-2 p-2 hover:bg-gray-600 hover:bg-opacity-5 dark:hover:bg-white duration-150 rounded-1-5" href="{{ itl.link }}"  aria-label="{{ itl.title }}" title="{{ itl.title }}">
  164.                                                                             {% if itl.linkPicture is not empty %}<img src="{{ itl.linkPicture }}" width="20" style="margin-top:-2px;" />{% endif %}
  165.                                                                             <span class="vstack gap-narrow mt-nnarrow"><b class="fw-bold dark:text-white">{{ itl.title }}</b>
  166.                                                                         {% if itl.description is not empty %}<span class="fw-normal">{{ itl.description }}</span>{% endif %}
  167.                                                                     </span>
  168.                                                                         </a>
  169.                                                                     </li>
  170.                                                                 {% endfor %}
  171.                                                             </ul>
  172.                                                         </div>
  173.                                                         {% if m.submenuHTML is not empty %}
  174.                                                             <div>
  175.                                                                 <ul class="uc-nav uc-navbar-dropdown-nav p-2 h-100 bg-gray-25 dark:bg-gray-300 dark:bg-opacity-5">
  176.                                                                     {{ m.submenuHTML|raw }}
  177.                                                                 </ul>
  178.                                                             </div>
  179.                                                         {% endif %}
  180.                                                     </div>
  181.                                                 </div>
  182.                                             </li>
  183.                                         {% endif %}
  184.                                     {% endfor %}
  185.                                 {% endif %}
  186.                             </ul>
  187.                         </div>
  188.                         <div class="uc-navbar-right">
  189.                             <ul class="uc-navbar-nav gap-3 xl:gap-4 d-none lg:d-flex fw-medium ltr:ms-2 ltr:xl:ms-4 rtl:me-2 rtl:xl:me-4">
  190.                                 {% set translationsPaths = app.session.get('translations_paths') %}
  191.                                 {% if translationsPaths is not null %}
  192.                                     <li class="d-inline-block">
  193.                                         <a href="#" class="hstack gap-1 text-none fw-medium" role="button" aria-haspopup="true" aria-expanded="true">
  194.                                             <i class="icon icon-1 unicon-wikis"></i>
  195.                                             <span>{{ app.request.locale }}</span>
  196.                                         </a>
  197.                                         <div class="w-200px py-1 bg-white dark:bg-gray-700 shadow-xs rounded-2 " data-uc-drop="mode: click; offset: 0; pos: top-right; boundary: !.uc-navbar-container; animation: uc-animation-slide-top-small; duration: 150;" style="top: 100px; left: 889.023px; max-width: 2017px;">
  198.                                             <ul class="nav-y gap-0 fs-7">
  199.                                                 {% for key, value in translationsPaths %}
  200.                                                     {% if key == "en" %}
  201.                                                         <li>
  202.                                                             <a href="{{ value }}" class="w-100 p-1 px-2 hover:bg-gray-600 hover:bg-opacity-5 dark:hover:bg-white duration-150">
  203.                                                                 <img class="w-20px rounded-1 me-1 rtl:me-0 rtl:ms-1" src="/assets/lexend/images/common/en.svg" alt="{{ "Anglais"|translateLocale(arrayTranslate) }}" /> {{ "Anglais"|translateLocale(arrayTranslate) }}
  204.                                                             </a>
  205.                                                         </li>
  206.                                                     {% endif %}
  207.                                                     {% if key == "fr" %}
  208.                                                         <li>
  209.                                                             <a href="{{ value }}" class="w-100 p-1 px-2 hover:bg-gray-600 hover:bg-opacity-5 dark:hover:bg-white duration-150">
  210.                                                                 <img class="w-20px rounded-1 me-1 rtl:me-0 rtl:ms-1" src="/assets/lexend/images/common/fr.svg" alt="{{"Français"|translateLocale(arrayTranslate)}}" /> {{"Français"|translateLocale(arrayTranslate)}}
  211.                                                             </a>
  212.                                                         </li>
  213.                                                     {% endif %}
  214.                                                     {% if key == "de" %}
  215.                                                         <li>
  216.                                                             <a href="{{ value }}" class="w-100 p-1 px-2 hover:bg-gray-600 hover:bg-opacity-5 dark:hover:bg-white duration-150">
  217.                                                                 <img class="w-20px rounded-1 me-1 rtl:me-0 rtl:ms-1" src="/assets/lexend/images/common/de.svg" alt="{{ "Allemand"|translateLocale(arrayTranslate) }}" /> {{ "Allemand"|translateLocale(arrayTranslate) }}
  218.                                                             </a>
  219.                                                         </li>
  220.                                                     {% endif %}
  221.                                                 {% endfor %}
  222.                                             </ul>
  223.                                         </div>
  224.                                     </li>
  225.                                 {% endif %}
  226.                                 {% if menuHeader2 is not empty %}
  227.                                     {% for m in menuHeader2 %}
  228.                                         {% if m.typeButton == "download" %}
  229.                                             <li>
  230.                                                 <a href="{{ m.link }}" {% if m.targetBlank == 1%}target="_blank"{% endif %} title="{{ m.title }}" class="btn btn-md btn-primary border-0 px-3 lg:d-inline-flex">
  231.                                                     {{ m.title }}
  232.                                                 </a>
  233.                                             </li>
  234.                                         {% else %}
  235.                                             <li>
  236.                                                 <a href="{{ m.link }}" {% if m.targetBlank == 1%}target="_blank"{% endif %} title="{{ m.title }}">{{ m.title }}</a>
  237.                                             </li>
  238.                                         {% endif %}
  239.                                     {% endfor %}
  240.                                 {% endif %}
  241.                             </ul>
  242.                         </div>
  243.                     </div>
  244.                 </div>
  245.             </div>
  246.         </nav>
  247.     </header>
  248. {% endif %}
  250. <div id="uc-menu-panel" data-uc-offcanvas="overlay: true;" class="uc-offcanvas uc-offcanvas-overlay" tabindex="-1">
  251.     <div class="uc-offcanvas-bar bg-white text-dark dark:bg-gray-900 dark:text-white uc-offcanvas-bar-animation uc-offcanvas-slide" role="dialog" aria-modal="true" style="max-width: 581px;">
  252.         <header class="uc-offcanvas-header hstack justify-between items-center pb-2 bg-white dark:bg-gray-900">
  253.             <div class="uc-logo">
  254.                 <a href="{% if app.request.locale == default_locale %}{{ path('homepage') }}{% else %}{{ path('locale_homepage',{'_locale':app.request.locale}) }}{% endif %}" class="h5 text-none text-gray-900 dark:text-white">
  255.                     <img src="{{ logo }}" alt="{{ websitename }}" width="{{ logo_width }}" height="{{ logo_height }}">
  256.                 </a>
  257.             </div>
  258.             <button class="uc-offcanvas-close rtl:end-auto rtl:start-0 m-1 mt-2 icon-3 btn border-0 dark:text-white dark:text-opacity-50 hover:text-primary hover:rotate-90 duration-150 transition-all" type="button">
  259.                 <i class="unicon-close"></i>
  260.             </button>
  261.         </header>
  263.         <div class="panel">
  264.             <div class="uc-sticky-placeholder" hidden=""></div>
  265.             <ul class="nav-y gap-narrow fw-medium fs-6 uc-nav" data-uc-nav="">
  266.                 {% if menuHeader is not empty %}
  267.                     {% for m in  menuHeader %}
  268.                         {% if m.link != "#" %}
  269.                             <li><a href="{{ m.link }}" {% if m.targetBlank == 1%}target="_blank"{% endif %}>{{ m.title }}</a></li>
  270.                         {% else %}
  271.                             {% set itemsLink = getMenuWebsiteItems(m.id) %}
  272.                             <li class="uc-parent">
  273.                                 <a href="#" id="uc-nav-{{ m.id }}" role="button" aria-controls="uc-nav-{{ m.id }}" aria-expanded="false" aria-disabled="false">{{ m.title }}</a>
  274.                                 <ul class="uc-nav-sub uc-nav" data-uc-nav="" hidden="" id="uc-nav-12" role="region" aria-labelledby="uc-nav-11">
  275.                                     {% for itl in itemsLink %}
  276.                                     <li role="presentation"><a href="{{ itl.link }}">{{ itl.title }}</a></li>
  277.                                     {% endfor %}
  278.                                 </ul>
  279.                             </li>
  280.                         {% endif %}
  281.                     {% endfor %}
  282.                 {% endif %}
  283.                 <li class="hr opacity-10 my-1"></li>
  284.                 {% if menuHeader2 is not empty %}
  285.                     {% for m in menuHeader2 %}
  286.                         {% if m.typeButton == "download" %}
  287.                             <li>
  288.                                 <a href="{{ m.link }}" {% if m.targetBlank == 1%}target="_blank"{% endif %} title="{{ m.title }}" class="btn btn-md btn-primary border-0 px-3 lg:d-inline-flex" style="color:white !important;">
  289.                                     {{ m.title }}
  290.                                 </a>
  291.                             </li>
  292.                         {% else %}
  293.                             <li>
  294.                                 <a href="{{ m.link }}" {% if m.targetBlank == 1%}target="_blank"{% endif %} title="{{ m.title }}">{{ m.title }}</a>
  295.                             </li>
  296.                         {% endif %}
  297.                     {% endfor %}
  298.                 {% endif %}
  299.             </ul>
  300.             <ul class="social-icons nav-x mt-4">
  301.                 {% if facebook is not empty %}
  302.                     <li>
  303.                         <a href="{{ facebook }}" target="_blank">
  304.                             <i class="icon icon-2 unicon-logo-facebook"></i>
  305.                         </a>
  306.                     </li>
  307.                 {% endif %}
  308.                 {% if twitter is not empty %}
  309.                     <li>
  310.                         <a href="{{ twitter }}" target="_blank">
  311.                             <i class="icon icon-2 unicon-logo-x-filled"></i>
  312.                         </a>
  313.                     </li>
  314.                 {% endif %}
  315.                 {% if instagram is not empty %}
  316.                     <li>
  317.                         <a href="{{ instagram }}" target="_blank">
  318.                             <i class="icon icon-2 unicon-logo-instagram"></i>
  319.                         </a>
  320.                     </li>
  321.                 {% endif %}
  322.                 {% if linkedin is not empty %}
  323.                     <li>
  324.                         <a href="{{ linkedin }}" target="_blank">
  325.                             <i class="icon icon-2 unicon-logo-linkedin"></i>
  326.                         </a>
  327.                     </li>
  328.                 {% endif %}
  329.                 {% if youtube is not empty %}
  330.                     <li>
  331.                         <a href="{{ youtube }}" target="_blank">
  332.                             <i class="icon icon-2 unicon-logo-youtube"></i>
  333.                         </a>
  334.                     </li>
  335.                 {% endif %}
  336.             </ul>
  337.             <div class="uc-sticky-placeholder" hidden=""></div>
  338.         </div>
  339.     </div>
  340. </div>