{% set mainNavigation = app_navigation_main() %}
<div x-data="{ mobileMenuOpen: false }">
<!--
Mobile menu
Off-canvas menu for mobile, show/hide based on off-canvas menu state.
-->
<div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
<div
x-cloak x-show="mobileMenuOpen"
x-transition:enter="transition-opacity ease-linear duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-linear duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 bg-black bg-opacity-25"></div>
<div class="fixed inset-0 z-40 flex"
x-cloak x-show="mobileMenuOpen"
x-transition:enter="transition ease-in-out duration-300 transform"
x-transition:enter-start="-translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transition ease-in-out duration-300 transform"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="-translate-x-full">
<div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl" @click.outside="mobileMenuOpen = false">
<div class="flex px-4 pt-5 pb-2">
<button @click="mobileMenuOpen = false" type="button" class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400">
<span class="sr-only">Close menu</span>
<!-- Heroicon name: outline/x-mark -->
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Links -->
<div class="mt-2">
<div class="space-y-5 px-4 pt-10 pb-8">
<div class="flow-root">
<a href="{{ navStartNode }}" class="-m-2 block p-2 font-medium text-gray-900">{{ 'navigation.Gesamtsortiment' | trans }}</a>
</div>
{% for key, navigation in mainNavigation %}
{% if navigation is iterable and navigation.url is not defined %}
<div>
<p id="men-clothing-heading-mobile" class="font-medium text-gray-900">{{ ('navigation.' ~ key) | trans }}</p>
<ul role="list" aria-labelledby="men-clothing-heading-mobile" class="mt-6 flex flex-col space-y-6">
{% for subNavigation in navigation %}
<li class="flow-root">
<a href="{{ navStartNode }}{{ subNavigation.url }}" class="-m-2 block p-2 text-gray-500">{{ subNavigation.label }}</a>
</li>
{% endfor %}
</ul>
</div>
{% else %}
<div class="flow-root">
<a href="{{ navStartNode }}{{ navigation.url }}" class="-m-2 block p-2 font-medium text-gray-900">{{ navigation.label }}</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<div class="border-t border-gray-200 py-6 px-4">
<a href="{{ otherLanguageUrl }}" class="-m-2 flex items-center p-2">
<img src="{{ asset("/build/images/locales/" ~ app.request.getLocale() ~ ".png") }}" alt="" class="block h-auto w-5 flex-shrink-0">
<span class="ml-3 block text-sm font-medium">{{ app.request.getLocale() | upper }}</span>
<span class="sr-only">, change language</span>
</a>
</div>
</div>
</div>
</div>
<header class="relative">
<div class="bg-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" x-data="{ isSearching: false}">
<div class="border-b border-gray-200">
<div class="flex h-20 items-center justify-between">
<!-- Logo (lg+) -->
<div class="hidden lg:flex lg:flex-1 lg:items-center gap-4">
<a href="{{ navStartNode }}">
<img class="h-12 w-auto flex-shrink-0" src="{{ asset('build/images/logo.jpg') }}" alt="Hugo Josten Logo">
</a>
<a href="https://hugo-josten.de" class="flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-800">
<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">
<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" />
</svg>
Zur Website
</a>
</div>
<div class="hidden h-full lg:flex">
<!-- Flyout menus -->
<div class="inset-x-0 bottom-0 px-4">
<div class="flex h-full justify-center space-x-8">
<a href="{{ navStartNode }}/" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800">{{ 'navigation.Gesamtsortiment' | trans }}</a>
{% for key, navigation in mainNavigation %}
{% if navigation is iterable and navigation.url is not defined %}
<div x-data="{ isOpen: false }" @click.away="isOpen = false" class="relative">
<div class="flex h-full">
<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'">
<span>{{ ('navigation.' ~ key) | trans }}</span>
<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">
<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" />
</svg>
</button>
</div>
<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">
{% for subNavigation in navigation %}
<a href="{{ navStartNode }}{{ subNavigation.url }}" class="block hover:text-brand-500">{{ subNavigation.label }}</a>
{% endfor %}
</div>
</div>
{% else %}
<a href="{{ navStartNode }}{{ navigation.url }}" class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800 ">{{ navigation.label }}</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<!-- Mobile menu and search (lg-) -->
<div class="flex flex-1 items-center lg:hidden">
<!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
<button @click="mobileMenuOpen = true" type="button" class="-ml-2 rounded-md bg-white p-2 text-gray-400">
<span class="sr-only">Open menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<!-- Logo (lg-) -->
<a href="#" class="lg:hidden">
<img class="h-12 w-auto flex-shrink-0" src="{{ asset('build/images/logo.jpg') }}" alt="Hugo Josten Logo">
</a>
<div class="ml-auto flex flex-1 items-center justify-end">
<!--<div class="hidden lg:ml-8 lg:flex">
<a href="{{ otherLanguageUrl }}" class="flex items-center text-gray-700 hover:text-gray-800">
<img src="{{ asset("/build/images/locales/" ~ app.request.getLocale() ~ ".png") }}" alt="" class="block h-auto w-5 flex-shrink-0">
<span class="ml-3 block text-sm font-medium">{{ app.request.getLocale() | upper }}</span>
<span class="sr-only">, change language</span>
</a>
</div>
-->
<!-- Search -->
<div class="flex lg:ml-6">
<a @click="isSearching = !isSearching" href="#" class="p-2 text-gray-400 hover:text-gray-500">
<span class="sr-only">Search</span>
<!-- Heroicon name: outline/magnifying-glass -->
<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">
<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" />
</svg>
</a>
</div>
</div>
</div>
<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">
<form action="{{ path('search') }}" class="search-box mx-auto">
<div class="relative mt-2 rounded-md shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<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">
<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" />
</svg>
</div>
<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">
</div>
</form>
</div>
</div>
</div>
</div>
</header>
</div>