templates/galilea/import/components/header.twig line 1

  1. <header class="fixed top-0 z-20 w-full text-sm pointer-events-none" :class="{'text-black': overlay && !$store.header.open, 'text-white': !overlay || $store.header.open}" x-data="header" @scroll.window.passive="handleScroll" @resize.window="handleResize" x-cloak>
  2.     <div class="relative transition-transform" :class="{'-translate-y-[150%]': hide && !$store.header.open}">
  3.         <div class="absolute inset-0 w-full transition-colors" :class="{'bg-white/70 backdrop-blur-[3rem]': overlay && !$store.header.open}"></div>
  5.         <div class="container relative pointer-events-auto">
  6.             <div class="flex relative items-center h-16 lg:h-24">
  7.                 <a href="{{ homepage_url ?: '/' }}" class="block z-20 w-28 transition-colors lg:mr-16 xl:mr-32 shrink-0">
  8.                     {{ include((baseIncludePath ? baseIncludePath : '') ~ 'components/logo.twig') }}
  9.                 </a>
  11.                 <nav class="flex gap-6 items-center mr-6 max-lg:hidden">
  12.                     {% for item in header_nav %}
  13.                         {% if item.children %}
  14.                             <div class="relative group">
  15.                                 <a href="{{item.url}}" class="flex gap-1 items-center transition-colors" {{ item.target ? ('target="' ~ item.target ~ '" rel="noopener noreferrer"')|raw }} :class="{'hover:text-brand-50': overlay, 'hover:text-secondary-50': !overlay}">
  16.                                     {{ item.title }}
  17.                                     {% if item.target %}
  18.                                         <span class="inline-block relative w-[0.6em] -top-[0.1em]">
  19.                                             {% include (baseIncludePath ? baseIncludePath : '') ~ 'svgs/external.twig' %}
  20.                                         </span>
  21.                                     {% endif %}
  23.                                 </a>
  25.                                 <div class="absolute left-0 top-full pt-3 text-black opacity-0 transition-all translate-y-4 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto" :class="{'!pointer-events-none': hide}">
  26.                                     <nav class="relative -left-4 p-4 space-y-3 bg-white rounded-2xl">
  27.                                         {% for item in item.children %}
  28.                                             <a href="{{ item.url }}" class="block transition-colors hover:text-brand-50">
  29.                                                 {{item.title}}
  30.                                             </a>
  31.                                         {% endfor %}
  32.                                     </nav>
  33.                                 </div>
  34.                             </div>
  35.                         {% else %}
  36.                             <a href="{{item.url}}" class="flex gap-1 items-center transition-colors" {{ item.target ? ('target="' ~ item.target ~ '" rel="noopener noreferrer"')|raw }} :class="{'hover:text-brand-50': overlay, 'hover:text-secondary-50': !overlay}">
  37.                                 {{ item.title }}
  38.                                 {% if item.target %}
  39.                                     <span class="inline-block relative w-[0.6em] -top-[0.1em]">
  40.                                         {% include (baseIncludePath ? baseIncludePath : '') ~ 'svgs/external.twig' %}
  41.                                     </span>
  42.                                 {% endif %}
  43.                             </a>
  44.                         {% endif %}
  45.                     {% endfor %}
  46.                 </nav>
  48.                 <!-- If we only have two languages, we can toggle here without a select, just show en / de  -->
  49.                 <!--  TODO: the language link for the page has to be inserted here -->
  50.                 <a href="{{ language_link }}" class="flex gap-2 items-center mr-6 ml-auto uppercase transition-colors lg:mr-10" :class="{'hover:text-brand-50': overlay, 'hover:text-secondary-50': !overlay}">
  51.                     <span class="size-4">
  52.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 15 15">
  53.                             <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" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
  54.                             <path d="M7.5 14.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
  55.                         </svg>
  56.                     </span>
  57.                     <span>{{ language_label }}</span>
  58.                 </a>
  60.                 <nav class="flex gap-10 items-center max-lg:hidden">
  61.                     {% for item in header_subnav %}
  62.                         <a href="{{item.url}}" class="flex gap-1 items-center transition-colors" {{ item.target ? ('target="' ~ item.target ~ '" rel="noopener noreferrer"')|raw }} :class="{'hover:text-brand-50': overlay, 'hover:text-secondary-50': !overlay}">
  63.                             {{ item.title }}
  64.                             {% if item.target %}
  65.                                 <span class="inline-block relative w-[0.6em] -top-[0.1em]">
  66.                                     {% include (baseIncludePath ? baseIncludePath : '') ~ 'svgs/external.twig' %}
  67.                                 </span>
  68.                             {% endif %}
  69.                         </a>
  70.                     {% endfor %}
  72.                     {% for cta in header_ctas %}
  73.                         <a href="{{ cta.url }}" class="btn btn-lg" :class="{'btn-tertiary': !overlay || $store.header.open, 'btn-tertiary-inverted': overlay && !$store.header.open}" {{ cta.target ? ('target="' ~ cta.target ~ '" rel="noopener noreferrer"')|raw }}>
  74.                             {{ cta.title }}
  75.                         </a>
  76.                     {% endfor %}
  77.                 </nav>
  79.                 <button class="flex z-20 justify-center items-center rounded-full lg:hidden size-12 bg-white/15" @click="$store.header.open = !$store.header.open">
  80.                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 18 7" class="absolute w-[1.125rem]" x-show="!$store.header.open"><path fill="currentColor" fill-rule="evenodd" d="M18 0H0v1h18V0Zm0 6H0v1h18V6Z" clip-rule="evenodd"/></svg>
  81.                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 14 14" class="absolute w-4" x-show="$store.header.open"><path fill="currentColor" fill-rule="evenodd" d="m7.707 7 6.01-6.01-.707-.707L7 6.293.99.283.282.99 6.292 7l-6.01 6.01.708.708L7 7.708l6.01 6.01.707-.707L7.707 7Z" clip-rule="evenodd"/></svg>
  82.                 </button>
  83.             </div>
  84.         </div>
  85.     </div>
  87.     <div class="fixed top-0 z-10 w-full h-screen bg-black transition-opacity duration-500" :class="{'opacity-0 pointer-events-none': !$store.header.open, 'pointer-events-auto': $store.header.open}">
  88.         <canvas class="absolute inset-0 pointer-events-none size-full" x-rive="{{ footer_animation }}"></canvas>
  90.         <div class="flex overflow-auto absolute inset-0 flex-col px-6 pt-32 pb-10 h-full transition-transform size-full header-mask" :class="{'-translate-x-full': subnav}" data-lenis-prevent>
  91.             <nav class="space-y-5 text-2xl mainnav">
  92.                 {% for item in header_nav %}
  93.                     {% if item.children %}
  94.                         <a href="#" class="flex gap-1 items-center transition-colors hover:text-secondary-50" {{ item.target ? ('target="' ~ item.target ~ '" rel="noopener noreferrer"')|raw }} @click.prevent="subnav = {{ loop.index }}">
  95.                             {{ item.title }}
  96.                             <span class="pt-0.5 ml-2 w-2.5">
  97.                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 12 19"><path fill="currentColor" fill-rule="evenodd" d="M8.364 9.808.586 17.586 2 19l9.192-9.192L2 .615.586 2.03l7.778 7.779Z" clip-rule="evenodd"/></svg>
  98.                             </span>
  99.                         </a>
  100.                     {% else %}
  101.                         <a href="{{item.url}}" class="flex gap-1 items-center transition-colors hover:text-secondary-50" {{ item.target ? ('target="' ~ item.target ~ '" rel="noopener noreferrer"')|raw }} @click="$store.header.open = false">
  102.                             {{ item.title }}
  103.                             {% if item.target %}
  104.                                 <span class="inline-block relative w-[0.6em] -top-[0.1em]">
  105.                                     {% include (baseIncludePath ? baseIncludePath : '') ~ 'svgs/external.twig' %}
  106.                                 </span>
  107.                             {% endif %}
  108.                         </a>
  109.                     {% endif %}
  110.                 {% endfor %}
  112.                 {% for item in header_subnav %}
  113.                     <a href="{{item.url}}" class="flex gap-1 items-center transition-all hover:text-secondary-50" {{ item.target ? ('target="' ~ item.target ~ '" rel="noopener noreferrer"')|raw }} @click="$store.header.open = false">
  114.                         {{ item.title }}
  115.                         {% if item.target %}
  116.                             <span class="inline-block relative w-[0.6em] -top-[0.1em]">
  117.                                 {% include (baseIncludePath ? baseIncludePath : '') ~ 'svgs/external.twig' %}
  118.                             </span>
  119.                         {% endif %}
  120.                     </a>
  121.                 {% endfor %}
  122.             </nav>
  124.             <nav class="flex pt-10 mt-auto">
  125.                 {% for cta in header_ctas %}
  126.                     <a href="{{ cta.url }}" class="shrink basis-full btn btn-lg btn-primary" {{ cta.target ? ('target="' ~ cta.target ~ '" rel="noopener noreferrer"')|raw }} @click="$store.header.open = false">
  127.                         <span class="btndot"></span>
  128.                         {{ cta.title }}
  129.                     </a>
  130.                 {% endfor %}
  131.             </nav>
  132.         </div>
  134.         {% for item in header_nav %}
  135.             {% if item.children %}
  136.                 <div class="flex overflow-auto absolute inset-0 flex-col px-6 pt-32 pb-10 h-full transition-transform size-full header-mask" :class="{'translate-x-full': subnav !== {{ loop.index }}}" data-lenis-prevent>
  137.                     <nav class="space-y-5 text-2xl">
  138.                         <a href="#" @click.prevent="subnav = false" class="flex gap-3 items-center h-8 text-base text-white/70">
  139.                             <span class="w-3">
  140.                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 13 14"><path stroke="#fff" stroke-opacity=".7" d="M6.364 12.657.707 7m0 0 5.657-5.656M.707 7H12.02"/></svg>
  141.                             </span>
  142.                             {{ item.title}}
  143.                         </a>
  145.                         {% for item in item.children %}
  146.                             <a href="{{item.url}}" class="flex gap-1 items-center transition-colors hover:text-secondary-50" {{ item.target ? ('target="' ~ item.target ~ '" rel="noopener noreferrer"')|raw }} @click="$store.header.open = false">
  147.                                 {{ item.title }}
  148.                                 {% if item.target %}
  149.                                     <span class="inline-block relative w-[0.6em] -top-[0.1em]">
  150.                                         {% include (baseIncludePath ? baseIncludePath : '') ~ 'svgs/external.twig' %}
  151.                                     </span>
  152.                                 {% endif %}
  153.                             </a>
  154.                         {% endfor %}
  155.                     </nav>
  156.                 </div>
  157.             {% endif %}
  158.         {% endfor %}
  159.     </div>
  160. </header>