templates/include/header.html.twig line 1

Open in your IDE?
  1. {% set mainNavigation = app_navigation_main() %}
  3. <div x-data="{ mobileMenuOpen: false }">
  4.     <!--
  5.       Mobile menu
  7.       Off-canvas menu for mobile, show/hide based on off-canvas menu state.
  8.     -->
  9.     <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
  10.         <div
  11.             x-cloak x-show="mobileMenuOpen"
  12.             x-transition:enter="transition-opacity ease-linear duration-300"
  13.             x-transition:enter-start="opacity-0"
  14.             x-transition:enter-end="opacity-100"
  15.             x-transition:leave="transition-opacity ease-linear duration-300"
  16.             x-transition:leave-start="opacity-100"
  17.             x-transition:leave-end="opacity-0"
  18.             class="fixed inset-0 bg-black bg-opacity-25"></div>
  20.         <div class="fixed inset-0 z-40 flex"
  21.              x-cloak x-show="mobileMenuOpen"
  22.              x-transition:enter="transition ease-in-out duration-300 transform"
  23.              x-transition:enter-start="-translate-x-full"
  24.              x-transition:enter-end="translate-x-0"
  25.              x-transition:leave="transition ease-in-out duration-300 transform"
  26.              x-transition:leave-start="translate-x-0"
  27.              x-transition:leave-end="-translate-x-full">
  29.             <div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl"  @click.outside="mobileMenuOpen = false">
  30.                 <div class="flex px-4 pt-5 pb-2">
  31.                     <button @click="mobileMenuOpen = false" type="button" class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400">
  32.                         <span class="sr-only">Close menu</span>
  33.                         <!-- Heroicon name: outline/x-mark -->
  34.                         <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">
  35.                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  36.                         </svg>
  37.                     </button>
  38.                 </div>
  40.                 <!-- Links -->
  41.                 <div class="mt-2">
  42.                     <div class="space-y-5 px-4 pt-10 pb-8">
  43.                         <div class="flow-root">
  44.                             <a href="{{ navStartNode }}" class="-m-2 block p-2 font-medium text-gray-900">{{ 'navigation.Gesamtsortiment' | trans }}</a>
  45.                         </div>
  46.                         {% for key, navigation in mainNavigation %}
  47.                             {% if navigation is iterable and navigation.url is not defined %}
  48.                                 <div>
  49.                                     <p id="men-clothing-heading-mobile" class="font-medium text-gray-900">{{ ('navigation.' ~ key)  | trans }}</p>
  50.                                     <ul role="list" aria-labelledby="men-clothing-heading-mobile" class="mt-6 flex flex-col space-y-6">
  51.                                         {% for subNavigation in navigation %}
  52.                                             <li class="flow-root">
  53.                                                 <a href="{{ navStartNode }}{{ subNavigation.url }}" class="-m-2 block p-2 text-gray-500">{{ subNavigation.label }}</a>
  54.                                             </li>
  55.                                         {% endfor %}
  56.                                     </ul>
  57.                                     </div>
  58.                             {% else %}
  59.                                 <div class="flow-root">
  60.                                     <a href="{{ navStartNode }}{{ navigation.url }}" class="-m-2 block p-2 font-medium text-gray-900">{{ navigation.label }}</a>
  61.                                 </div>
  62.                             {% endif %}
  63.                         {% endfor %}
  64.                     </div>
  65.                 </div>
  68.                 <div class="border-t border-gray-200 py-6 px-4">
  69.                     <a href="{{ otherLanguageUrl }}" class="-m-2 flex items-center p-2">
  70.                         <img src="{{ asset("/build/images/locales/" ~ app.request.getLocale() ~ ".png") }}" alt="" class="block h-auto w-5 flex-shrink-0">
  71.                         <span class="ml-3 block text-sm font-medium">{{ app.request.getLocale() | upper }}</span>
  72.                         <span class="sr-only">, change language</span>
  73.                     </a>
  74.                 </div>
  75.             </div>
  76.         </div>
  77.     </div>
  82.     <header class="relative">
  83.         <div class="bg-white">
  84.             <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" x-data="{ isSearching: false}">
  85.                 <div class="border-b border-gray-200">
  86.                     <div class="flex h-20 items-center justify-between">
  87.                         <!-- Logo (lg+) -->
  88.                         <div class="hidden lg:flex lg:flex-1 lg:items-center gap-4">
  89.                             <a href="{{ navStartNode }}">
  90.                                 <img class="h-12 w-auto flex-shrink-0" src="{{ asset('build/images/logo.jpg') }}" alt="Hugo Josten Logo">
  91.                             </a>
  92.                             <a href="https://hugo-josten.de" class="flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-800">
  93.                                 <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">
  94.                                     <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" />
  95.                                 </svg>
  96.                                 Zur Website
  97.                             </a>
  98.                         </div>
  100.                         <div class="hidden h-full lg:flex">
  101.                             <!-- Flyout menus -->
  102.                             <div class="inset-x-0 bottom-0 px-4">
  103.                                 <div class="flex h-full justify-center space-x-8">
  105.                                     <a href="{{ navStartNode }}/" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">{{ 'navigation.Gesamtsortiment' | trans }}</a>
  107.                                     {% for key, navigation in mainNavigation %}
  108.                                         {% if navigation is iterable and navigation.url is not defined %}
  109.                                             <div x-data="{ isOpen: false }" @click.away="isOpen = false" class="relative">
  110.                                                 <div class="flex h-full">
  111.                                                     <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'">
  112.                                                         <span>{{ ('navigation.' ~ key) | trans }}</span>
  113.                                                         <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">
  114.                                                             <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" />
  115.                                                         </svg>
  116.                                                     </button>
  117.                                                 </div>
  118.                                                 <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">
  119.                                                     {% for subNavigation in navigation %}
  120.                                                         <a href="{{ navStartNode }}{{ subNavigation.url }}" class="block hover:text-brand-500">{{ subNavigation.label }}</a>
  121.                                                     {% endfor %}
  122.                                                 </div>
  123.                                             </div>
  124.                                         {% else %}
  125.                                             <a href="{{ navStartNode }}{{ navigation.url }}" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800 ">{{ navigation.label }}</a>
  126.                                         {% endif %}
  127.                                     {% endfor %}
  128.                                 </div>
  129.                             </div>
  130.                         </div>
  132.                         <!-- Mobile menu and search (lg-) -->
  133.                         <div class="flex flex-1 items-center lg:hidden">
  134.                             <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
  135.                             <button @click="mobileMenuOpen = true" type="button" class="-ml-2 rounded-md bg-white p-2 text-gray-400">
  136.                                 <span class="sr-only">Open menu</span>
  137.                                 <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  138.                                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
  139.                                 </svg>
  140.                             </button>
  141.                             <a href="https://hugo-josten.de" class="flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-800">
  142.                                 <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">
  143.                                     <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" />
  144.                                 </svg>
  145.                                 Zur Website
  146.                             </a>
  147.                         </div>
  149.                         <!-- Logo (lg-) -->
  150.                         <a href="#" class="lg:hidden">
  151.                             <img class="h-12 w-auto flex-shrink-0" src="{{ asset('build/images/logo.jpg') }}" alt="Hugo Josten Logo">
  152.                         </a>
  154.                         <div class="ml-auto flex flex-1 items-center justify-end">
  155.                             <!--<div class="hidden lg:ml-8 lg:flex">
  156.                                 <a href="{{ otherLanguageUrl }}" class="flex items-center text-gray-700 hover:text-gray-800">
  157.                                     <img src="{{ asset("/build/images/locales/" ~ app.request.getLocale() ~ ".png") }}" alt="" class="block h-auto w-5 flex-shrink-0">
  158.                                     <span class="ml-3 block text-sm font-medium">{{ app.request.getLocale() | upper }}</span>
  159.                                     <span class="sr-only">, change language</span>
  160.                                 </a>
  161.                             </div>
  162.                             -->
  163.                             <!-- Search -->
  164.                             <div class="flex lg:ml-6">
  165.                                 <a @click="isSearching = !isSearching; if (isSearching) { $nextTick(() => $refs.searchInput.focus()) }" href="#" class="p-2 text-gray-400 hover:text-gray-500 cursor-pointer">
  166.                                     <span class="sr-only">Search</span>
  167.                                     <!-- Heroicon name: outline/magnifying-glass -->
  168.                                     <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">
  169.                                         <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" />
  170.                                     </svg>
  171.                                 </a>
  172.                             </div>
  173.                         </div>
  174.                     </div>
  175.                     <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">
  176.                         <form action="{{ path('search') }}" class="search-box mx-auto">
  177.                             <div class="relative mt-2 rounded-md shadow-sm">
  178.                                 <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
  179.                                     <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">
  180.                                         <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" />
  181.                                     </svg>
  182.                                 </div>
  183.                                 <input x-ref="searchInput" 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">
  184.                             </div>
  185.                         </form>
  186.                     </div>
  187.                 </div>
  188.             </div>
  189.         </div>
  190.     </header>
  191. </div>