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

Open in your IDE?
  2. {% set logos = sulu_snippet_load_by_area('logos_area',null) %}
  3. {% set menu = [
  4. {
  5. 'title': 'agency',
  6. 'href': '/agency'
  7. }, {
  8. 'title': 'projects',
  9. 'href': '/projects'
  10. }, {
  11. 'title': 'services',
  12. 'href': '/services'
  13. }, {
  14. 'title': 'offers',
  15. 'href': '/offers'
  16. }, {
  17. 'title': 'partners',
  18. 'href': '/partners'
  19. }, {
  20. 'title': 'estimate',
  21. 'href': '/estimate'
  22. }, {
  23. 'title': 'investors',
  24. 'href': '/investors'
  25. }, {
  26. 'title': 'news',
  27. 'href': '/news'
  28. }, {
  29. 'title': 'team',
  30. 'href': '/team'
  31. }
  32. ] %}
  34. {% set lang = app.request.locale %}
  36. <header class="header {{ headerColor }}">
  37.   <div class="header-container custom-grid-3 h-full border-b border-gray z-20 relative">
  38.     <div class="relative flex border-r border-gray">
  39.       <button class="header-hamburger hidden lg:flex z-10 border-r border-gray"
  40.         aria-label="Menu">
  41.         <div class="flex items-center relative w-6 h-6">
  42.           <span class="top-2"></span>
  43.           <span class="top-4"></span>
  44.         </div>
  45.       </button>
  47.       <div class="lang-select flex lg:hidden border-l border-gray group">
  48.         <div class="lang-select__current">
  49.           <span>{{ lang|capitalize }}</span>
  50.           <svg class="w-4 h-4 ml-2 group-hover:rotate-180 duration-300">
  51.             <use xlink:href="#slide-down-arrow"></use>
  52.           </svg>
  53.         </div>
  55.         <ul class="lang-select__list absolute top-full w-full flex flex-col border-t border-gray opacity-0 pointer-events-none
  56.          group-hover:opacity-100 group-hover:pointer-events-auto
  57.          group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0
  58.          duration-100">
  60.         {% for localization in localizations %}
  61.                     {% if localization.locale != lang %}
  62.           <li>
  63.             <a class="flex items-center justify-center w-full h-14 px-2.5 py-1 outline-none" href="{{ localization.url }}">{{ localization.locale|capitalize }}</a>
  64.           </li>
  65.           {% endif %}
  66.                 {% endfor %}
  68.         </ul>
  69.       </div>
  70.       
  71.       
  72.       <ul class="header-left-menu hidden lg:grid grid-cols-3 w-full items-center divide-x divide-gray">
  73.         {% for item in sulu_navigation_root_tree('topLeft', 4) %}
  74.         <li class="header-menu-item">
  75.           <a href="{{ sulu_content_path(item.url) }}">{{ item.title }}</a>
  76.         </li>
  77.         {% endfor %}
  78.       </ul>
  79.     </div>
  81.     <div class="header-logo z-10 relative w-full flex items-center justify-center">
  82.       <a class="relative flex items-center h-full"
  83.         href="{{ sulu_content_root_path() }}">
  84.         <span class="text-[0px]">Home page</span>
  86.         {% if logos.content.image_dark.url is defined %}
  87.           <img class="header-logo__blue w-36 xs:w-44 lg:w-[clamp(15rem,16vw,17rem)] duration-500 opacity-0" src="{{ logos.content.image_dark.url }}" alt="">
  88.         {% endif %}
  89.         
  90.         {% if logos.content.image_white.url is defined %}
  91.           <img class="header-logo__white w-36 xs:w-44 lg:w-[clamp(15rem,16vw,17rem)] duration-500 absolute" src="{{ logos.content.image_white.url }}" alt="">
  92.         {% endif %}
  93.         
  94.       </a>
  95.     </div>
  97.     <div class="relative flex justify-end border-l border-gray">
  99.       <ul class="header-right-menu hidden lg:grid grid-cols-3 w-full items-center divide-x divide-gray">
  100.         {% for item in sulu_navigation_root_tree('topRight', 4) %}
  101.         <li class="header-menu-item">
  102.           <a href="{{ sulu_content_path(item.url) }}">{{item.title}}</a>
  103.         </li>
  104.         {% endfor %}
  105.       </ul>
  107.       <div class="lang-select hidden lg:flex border-l border-gray group">
  108.         <div class="lang-select__current">
  109.           <span>{{ lang|capitalize }}</span>
  110.           <svg class="w-4 h-4 ml-2 group-hover:rotate-180 duration-300">
  111.             <use xlink:href="#slide-down-arrow"></use>
  112.           </svg>
  113.         </div>
  115.         <ul class="lang-select__list absolute top-full w-full flex flex-col border-t border-gray opacity-0 pointer-events-none
  116.          group-hover:opacity-100 group-hover:pointer-events-auto
  117.          group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0
  118.          duration-100">
  120.         {% for localization in localizations %}
  121.                     {% if localization.locale != lang %}
  122.           <li>
  123.             <a class="flex items-center justify-center w-full h-14 px-2.5 py-1 outline-none" href="{{ localization.url }}">{{ localization.locale|capitalize }}</a>
  124.           </li>
  125.           {% endif %}
  126.                 {% endfor %}
  128.         </ul>
  129.       </div>
  132.       <button class="header-hamburger w-[100px] flex lg:hidden items-center justify-center relative"
  133.         aria-label="Menu">
  134.         <div class="flex items-center relative w-6 h-6">
  135.           <span class="top-2"></span>
  136.           <span class="top-4"></span>
  137.         </div>
  138.       </button>
  140.     </div>
  142.   </div>
  143.   
  144.   {% set contactInformations = sulu_snippet_load_by_area('ContactInformations_area',null, app.ContactInformations) %}
  145.   {# ----- MENU ----- #}
  146.   <div
  147.     class="menu fixed top-0 left-0 right-0 min-h-screen h-screen overflow-x-hidden overflow-y-auto lg:overflow-hidden pointer-events-none bg-blue text-white"
  148.     style="clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);">
  149.     <div class="grid grid-cols-[auto_1fr] md:grid-cols-2 lg:grid-cols-3 h-auto lg:h-full pb-20 lg:pb-0">
  151.       {# Absolute BG Logo #}
  152.       <svg
  153.         class="absolute lg:min-h-[600px] h-full lg:h-[120%] left-0 lg:left-1/3 top-1/2 lg:-translate-x-1/2 -translate-y-1/2 aspect-square text-white/5 pointer-events-none">
  154.         <use xlink:href="#circle"></use>
  155.       </svg>
  157.       {# Left column #}
  158.       <div
  159.         class="order-1 lg:order-none col-span-2 lg:col-span-1 flex flex-col justify-end h-full lg:pt-56 border-r border-white/5">
  160.         {# Text content #}
  161.         <div class="flex flex-col gap-8 px-8 xl:px-12 pb-8 lg:pb-14">
  163.           <div class="menu-left-fade"
  164.             fade
  165.             fade-trigger="none">
  166.             <p class="uppercase text-[10px] font-extrabold">{{contactInformations.content.contactsAdressTitle}}</p>
  168.             <address class="text-sm not-italic">
  169.               <p class="font-extrabold">{{contactInformations.content.contactsCompanyName}}</p>
  170.               <p class="mt-1">
  171.                 <span>{{contactInformations.content.contactsCompanyAdress}}</span>
  172.               </p>
  173.             </address>
  174.           </div>
  176.           <div class="menu-left-fade"
  177.             fade
  178.             fade-trigger="none">
  179.             <p class="uppercase text-[10px] font-extrabold">{{contactInformations.content.contactsPhoneText}}</p>
  180.             <p class="mt-1">
  181.               <a class=""
  182.                 href="tel:{{contactInformations.content.contactsPhone}}">{{contactInformations.content.contactsPhone}}</a>
  183.             </p>
  184.           </div>
  186.           <div class="menu-left-fade"
  187.             fade
  188.             fade-trigger="none">
  189.             <p class="uppercase text-[10px] font-extrabold">{{contactInformations.content.contactsEmailText}}</p>
  190.             <p class="mt-1">
  191.               {% include 'partials/layout/contact_email.html.twig' with { email: contactInformations.content.contactsEmail } %}
  192.             </p>
  193.           </div>
  194.         </div>
  196.         {# Socials #}
  197.         <div
  198.           class="menu-socials grid grid-cols-4 lg:pb-0 mx-8 lg:mx-0 border-x lg:border-x-0 border-y border-white/5 divide-x divide-white/5"
  199.           fade
  200.           fade-trigger="none">
  201.           {% for social in contactInformations.content.socials %}
  202.           <div class="h-16 md:h-24 xl:h-[120px] hover:bg-white/25 duration-500 ease-basic-ease group">
  203.             <a href="{{social.socialUrl}}"
  204.               class="flex items-center justify-center w-full h-full text-[0px]"
  205.               target="blank">
  206.               {{social.socialName}}
  207.               <svg class="block w-4 h-4 group-hover:scale-125 duration-500 ease-basic-ease">
  208.                 <use xlink:href="#{{social.socialName}}"></use>
  209.               </svg>
  210.             </a>
  211.           </div>
  212.           {% endfor %}
  214.         </div>
  215.       </div>
  217.       {# Center cloumn #}
  218.       <div class="h-full pt-40 px-8 lg:px-12 pb-16 overflow-auto">
  219.         <nav class="h-full w-full flex items-end">
  220.           <ul class="flex flex-col gap-4">
  221.             {% for item in sulu_navigation_root_tree('burger', 4) %}
  222.             <li class="center-menu-item"
  223.               fade
  224.               fade-trigger="none">
  225.               <a class="menu-clip-item text-[2.5rem] sm:text-5xl lg:text-[5vh] leading-none"
  226.                 href="{{ sulu_content_path(item.url) }}">
  227.                 <span>{{item.title}}</span>
  228.                 <span>{{item.title}}</span>
  229.               </a>
  230.             </li>
  231.             {% endfor %}
  232.           </ul>
  233.         </nav>
  234.       </div>
  236.       {# Right column #}
  237.       <div class="relative w-full h-full overflow-hidden">
  238.       {% if contactInformations.content.menuBurgerImage|length > 0 %}
  239.         <img class="menu-img hidden lg:block w-full h-full object-cover scale-[1.4]"
  240.           src="{{contactInformations.content.menuBurgerImage.url}}"
  241.           alt="Oaks Lane Menu"
  242.           loading="lazy">
  243.       {% endif %}
  244.         <div class="hidden lg:block absolute inset-0 bg-blue/30"></div>
  246.         {# Rotate text line #}
  247.         <div
  248.           class="menu-translate-text-wrapp absolute bottom-8 left-0 right-1 lg:right-8 origin-bottom-right leading-[0.8] pointer-events-none"
  249.           style="transform: rotate(-90deg) translateX(100%)">
  250.           <div
  251.             class="menu-translate-text text-[90px] md:text-[120px] 2xl:text-[155px] stroke-text whitespace-nowrap uppercase tracking-[0.13em]">
  252.             {{contactInformations.content.contactsCompanyName}}</div>
  253.         </div>
  254.       </div>
  255.     </div>
  256.   </div>
  257. </header>