templates/include/header.html.twig line 1

Open in your IDE?
  1. {% set mainNavigation = app_navigation_main() %}
  2. <div x-data="{ mobileMenuOpen: false }">
  3.     <!--
  4.       Mobile menu
  5.       Off-canvas menu for mobile, show/hide based on off-canvas menu state.
  6.     -->
  7.     <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
  8.         <div
  9.             x-cloak x-show="mobileMenuOpen"
  10.             x-transition:enter="transition-opacity ease-linear duration-300"
  11.             x-transition:enter-start="opacity-0"
  12.             x-transition:enter-end="opacity-100"
  13.             x-transition:leave="transition-opacity ease-linear duration-300"
  14.             x-transition:leave-start="opacity-100"
  15.             x-transition:leave-end="opacity-0"
  16.             class="fixed inset-0 bg-black bg-opacity-25"></div>
  17.         <div class="fixed inset-0 z-40 flex"
  18.              x-cloak x-show="mobileMenuOpen"
  19.              x-transition:enter="transition ease-in-out duration-300 transform"
  20.              x-transition:enter-start="-translate-x-full"
  21.              x-transition:enter-end="translate-x-0"
  22.              x-transition:leave="transition ease-in-out duration-300 transform"
  23.              x-transition:leave-start="translate-x-0"
  24.              x-transition:leave-end="-translate-x-full">
  25.             <div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl"  @click.outside="mobileMenuOpen = false">
  26.                 <div class="flex px-4 pt-5 pb-2">
  27.                     <button @click="mobileMenuOpen = false" type="button" class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400">
  28.                         <span class="sr-only">Close menu</span>
  29.                         <!-- Heroicon name: outline/x-mark -->
  30.                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  31.                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  32.                         </svg>
  33.                     </button>
  34.                 </div>
  35.                 <!-- Links -->
  36.                 <div class="mt-2">
  37.                     <div class="space-y-5 px-4 pt-10 pb-8">
  38.                         <div class="flow-root">
  39.                             <a href="{{ navStartNode }}" class="-m-2 block p-2 font-medium text-gray-900">{{ 'navigation.Gesamtsortiment' | trans }}</a>
  40.                         </div>
  41.                         {% for key, navigation in mainNavigation %}
  42.                             {% if navigation is iterable and navigation.url is not defined %}
  43.                                 <div>
  44.                                     <p id="men-clothing-heading-mobile" class="font-medium text-gray-900">{{ ('navigation.' ~ key)  | trans }}</p>
  45.                                     <ul role="list" aria-labelledby="men-clothing-heading-mobile" class="mt-6 flex flex-col space-y-6">
  46.                                         {% for subNavigation in navigation %}
  47.                                             <li class="flow-root">
  48.                                                 <a href="{{ navStartNode }}{{ subNavigation.url }}" class="-m-2 block p-2 text-gray-500">{{ subNavigation.label }}</a>
  49.                                             </li>
  50.                                         {% endfor %}
  51.                                     </ul>
  52.                                     </div>
  53.                             {% else %}
  54.                                 <div class="flow-root">
  55.                                     <a href="{{ navStartNode }}{{ navigation.url }}" class="-m-2 block p-2 font-medium text-gray-900">{{ navigation.label }}</a>
  56.                                 </div>
  57.                             {% endif %}
  58.                         {% endfor %}
  59.                     </div>
  60.                 </div>
  61.                 <div class="border-t border-gray-200 py-6 px-4">
  62.                     <a href="{{ otherLanguageUrl }}" class="-m-2 flex items-center p-2">
  63.                         <img src="{{ asset("/build/images/locales/" ~ app.request.getLocale() ~ ".png") }}" alt="" class="block h-auto w-5 flex-shrink-0">
  64.                         <span class="ml-3 block text-sm font-medium">{{ app.request.getLocale() | upper }}</span>
  65.                         <span class="sr-only">, change language</span>
  66.                     </a>
  67.                 </div>
  68.             </div>
  69.         </div>
  70.     </div>
  71.     <header class="relative">
  72.         <div class="bg-white">
  73.             <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" x-data="{ isSearching: false}">
  74.                 <div class="border-b border-gray-200">
  75.                     <div class="flex h-20 items-center justify-between">
  76.                         <!-- Logo (lg+) -->
  77.                         <div class="hidden lg:flex lg:flex-1 lg:items-center gap-4">
  78.                             <a href="{{ navStartNode }}">
  79.                                 <img class="h-12 w-auto flex-shrink-0" src="{{ asset('build/images/logo.jpg') }}" alt="Hugo Josten Logo">
  80.                             </a>
  81.                             <a href="https://hugo-josten.de" class="flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-800">
  82.                                 <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  83.                                     <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75" />
  84.                                 </svg>
  85.                                 Zur Website
  86.                             </a>
  87.                         </div>
  88.                         <div class="hidden h-full lg:flex">
  89.                             <!-- Flyout menus -->
  90.                             <div class="inset-x-0 bottom-0 px-4">
  91.                                 <div class="flex h-full justify-center space-x-8">
  92.                                     <a href="{{ navStartNode }}/" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">{{ 'navigation.Gesamtsortiment' | trans }}</a>
  93.                                     {% for key, navigation in mainNavigation %}
  94.                                         {% if navigation is iterable and navigation.url is not defined %}
  95.                                             <div x-data="{ isOpen: false }" @click.away="isOpen = false" class="relative">
  96.                                                 <div class="flex h-full">
  97.                                                     <button @click="isOpen = !isOpen" type="button" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-800 focus:outline-none" :aria-expanded="isOpen ? 'true' : 'false'">
  98.                                                         <span>{{ ('navigation.' ~ key) | trans }}</span>
  99.                                                         <svg class="ml-1 h-6 w-6 md:group-hover:text-primary transition ease-in-out duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  100.                                                             <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
  101.                                                         </svg>
  102.                                                     </button>
  103.                                                 </div>
  104.                                                 <div x-cloak x-show="isOpen" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" class="absolute max-w-[14rem] w-screen left-1/2 transform -translate-x-1/2 rounded-lg bg-white p-4 text-sm leading-6 text-gray-900 shadow-lg ring-1 ring-gray-900/5 space-y-2 z-50" style="display: none">
  105.                                                     {% for subNavigation in navigation %}
  106.                                                         <a href="{{ navStartNode }}{{ subNavigation.url }}" class="block hover:text-brand-500">{{ subNavigation.label }}</a>
  107.                                                     {% endfor %}
  108.                                                 </div>
  109.                                             </div>
  110.                                         {% else %}
  111.                                             <a href="{{ navStartNode }}{{ navigation.url }}" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800 ">{{ navigation.label }}</a>
  112.                                         {% endif %}
  113.                                     {% endfor %}
  114.                                 </div>
  115.                             </div>
  116.                         </div>
  117.                         <!-- Mobile menu and search (lg-) -->
  118.                         <div class="flex flex-1 items-center lg:hidden">
  119.                             <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
  120.                             <button @click="mobileMenuOpen = true" type="button" class="-ml-2 rounded-md bg-white p-2 text-gray-400">
  121.                                 <span class="sr-only">Open menu</span>
  122.                                 <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  123.                                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
  124.                                 </svg>
  125.                             </button>
  126.                         </div>
  127.                         <!-- Logo (lg-) -->
  128.                         <a href="#" class="lg:hidden">
  129.                             <img class="h-12 w-auto flex-shrink-0" src="{{ asset('build/images/logo.jpg') }}" alt="Hugo Josten Logo">
  130.                         </a>
  131.                         <div class="ml-auto flex flex-1 items-center justify-end">
  132.                             <!--<div class="hidden lg:ml-8 lg:flex">
  133.                                 <a href="{{ otherLanguageUrl }}" class="flex items-center text-gray-700 hover:text-gray-800">
  134.                                     <img src="{{ asset("/build/images/locales/" ~ app.request.getLocale() ~ ".png") }}" alt="" class="block h-auto w-5 flex-shrink-0">
  135.                                     <span class="ml-3 block text-sm font-medium">{{ app.request.getLocale() | upper }}</span>
  136.                                     <span class="sr-only">, change language</span>
  137.                                 </a>
  138.                             </div>
  139.                             -->
  140.                             <!-- Search -->
  141.                             <div class="flex lg:ml-6">
  142.                                 <a @click="isSearching = !isSearching" href="#" class="p-2 text-gray-400 hover:text-gray-500">
  143.                                     <span class="sr-only">Search</span>
  144.                                     <!-- Heroicon name: outline/magnifying-glass -->
  145.                                     <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  146.                                         <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
  147.                                     </svg>
  148.                                 </a>
  149.                             </div>
  150.                         </div>
  151.                     </div>
  152.                     <div class="-mt-3 mb-4" x-cloak x-show="isSearching" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
  153.                         <form action="{{ path('search') }}" class="search-box mx-auto">
  154.                             <div class="relative mt-2 rounded-md shadow-sm">
  155.                                 <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
  156.                                     <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  157.                                         <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
  158.                                     </svg>
  159.                                 </div>
  160.                                 <input id="autoComplete" name="term" value="{{ app.request.get("term") }}" type="text" class="block w-full py-1.5 pl-10 rounded-md border-gray-300 focus:border-brand-500 focus:ring-brand-500 sm:text-" placeholder="{{ 'Type here to search...' | trans }}" autocomplete="off">
  161.                             </div>
  162.                         </form>
  163.                     </div>
  164.                 </div>
  165.             </div>
  166.         </div>
  167.     </header>
  168. </div>