<nav class="bg-white">
  
    <div class="mx-auto boxed px-2 sm:px-6 lg:px-4">
        <div 
            class="relative flex items-center justify-between transition duration-200 h-24"
            :class="shadow ? 'h-14 lg:h-16' : 'h-24'"
            >

            <div class="flex flex-1 lg:grid lg:grid-cols-[318px_auto] items-center justify-center sm:items-stretch sm:justify-start">
                <div class="relative">
                    {% include 'templates/components/logo/logo_navbar.twig' %}
                </div>
                <div class="hidden lg:mr-20 lg:block w-full">
                    <div x-cloak x-show="shadow" class="flex justify-end w-full h-full items-center">
                        {% for item in menus.top %}
                        <a href="{{item.url}}" class="px-2 py-2 font-normal font-condensed text-md hover:text-primary">
                            {{item.title}}
                        </a>
                        {% endfor %}
                        {# <a href="/schede-tecniche" class="px-2 py-2 font-semibold bg-slate-100 rounded-md text-md text-primary">Schede Tecniche</a> #}
                        <a href="/schede-tecniche/" class="px-2 py-2 text-md text-primary font-condensed hover:text-primary/80 uppercase">Schede Tecniche</a>
                    </div>
                </div>
            </div>

            <div x-show="!shadow" class="flex justify-end w-full h-full items-center">
                {% include 'templates/components/common/fullsearch-panel.twig' %}
            </div>
            <div x-cloak x-show="shadow" class="space-x-4">
                <div class="absolute inset-y-0 right-10 flex items-center">
                    <!-- Search Button -->
                    <button type="button"
                        class="relative inline-flex items-center justify-center rounded-lg p-2 lg:text-slate-900 text-white"
                        aria-controls="search-menu"  @click="searchOpen = !searchOpen; if (searchOpen) menuOpen = false" aria-expanded="false"
                        x-bind:aria-expanded="searchOpen.toString()">
                        <span class="absolute"></span>
                        <span class="sr-only">Apri la ricerca</span>
                        <div class="h-4 w-4 fill-slate-900 " :class="{ 'hidden': searchOpen, 'block': !searchOpen }">
                            {% include 'templates/components/icons/search.twig' %}
                        </div>
                        <svg x-description="Icon when search is open." x-state:on="Search open" x-state:off="Search closed"
                            class="hidden h-6 w-6" :class="{ 'block': searchOpen, 'hidden': !searchOpen }" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="absolute inset-y-0 right-0 flex items-center">
                                            
                    <!-- Mobile Menu Button -->
                    <button type="button"
                        class="relative inline-flex items-center justify-center rounded-lg p-2 text-slate-900 "
                        aria-controls="mobile-menu" @click="menuOpen = !menuOpen; if (menuOpen) searchOpen = false" aria-expanded="false"
                        x-bind:aria-expanded="menuOpen.toString()">
                        <span class="absolute"></span>
                        <span class="sr-only">Apri il menu</span>
                        <svg x-state:on="Menu open" x-state:off="Menu closed"
                            class="block h-6 w-6" :class="{ 'hidden': menuOpen, 'block': !menuOpen }" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" 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"></path>
                        </svg>
                        <svg x-description="Icon when menu is open." x-state:on="Menu open" x-state:off="Menu closed"
                            class="hidden h-6 w-6" :class="{ 'block': menuOpen, 'hidden': !menuOpen }" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>


    {% include 'templates/components/common/search-panel.twig' %}
    {% include 'templates/components/common/menu-panel.twig' %}

</nav>