<div class="n7-top-bar flex items-center py-1 md:py-2 px-4 n7-background-gray-02">
<div class="n7-top-bar__container xl:container mx-auto flex items-center lg:flex-1">
<div class="n7-top-bar__navigation grid lg:flex items-center gap-2 lg:gap-8">
<!-- LINK CERTIFICAZIONE ISO -->
<a href="" class="n7-link gap-2 p-0 text-xs lg:text-sm n7-content-01">
<img src="/images/iso-27001.png" alt="ISO 27001" width="75" height="38">
Certificazione ISO/IEC 27001
</a>
<!-- Secondary nav/menu component -->
<nav aria-label="Secondaria">
<ul class="n7-secondary-navigation lg:flex gap-4">
<li class="">
<a href="" class="n7-link p-2 text-xs lg:text-sm n7-content-01">voce 1</a>
</li>
<li class="">
<a href="" class="n7-link p-2 text-xs lg:text-sm n7-content-01">voce 2</a>
</li>
</ul>
</nav>
</div>
<div class="n7-top-bar__utilities-area ml-auto">
<!-- Search component -->
<div class="hidden lg:block">
<button type="button" id="searchModalTrigger" class="n7-btn n7-btn--secondary n7-btn--icon rounded-full w-6 h-6 md:w-10 md:h-10">
<span class="sr-only">Cerca nel sito di Artea - apri la modale</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
<!-- Search Modal -->
<div id="searchModal" class="fixed items-center content-center inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full" style="display:none;" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<div class="relative h-full lg:h-full lg:w-full mx-auto p-6 lg:p-16 shadow-lg bg-white">
<div class="container px-16 grid gap-14">
<div class="flex justify-between items-center">
<h2 id="modalTitle" class="text-3xl md:text-5xl lg:text-6xl">Cerca nel sito di Artea</h2>
<button id="closeModal" class="n7-btn n7-btn--icon border-0 hover:n7-background-primary hover:text-white">
<span class="sr-only">Chiudi</span>
<svg class="inline-block align-middle fill-current w-8 h-8" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--x-mark" />
</svg>
</button>
</div>
<div class="modal-content">
<form role="search" class="flex gap-2">
<div class="n7-input-field grid gap-3 flex-1">
<label for="inputSearch" class="block text-sm font-medium n7-content-03">Cerca servizi, informazioni, aiuti...</label>
<div class="n7-input flex items-center relative">
<svg class="inline-block align-middle fill-current w-6 h-6 absolute left-4 n7-content-placeholder" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--magnifying-glass" />
</svg>
<input id="inputSearch" class="w-full border-2 n7-border-gray-01 text-sm n7-input-placeholder py-3 px-4 border n7-border-gray-01 rounded-lg pl-12 " type="search" placeholder="Cerca">
</div>
</div>
<button type="button" class="n7-btn
n7-btn--primary
n7-btn--primary self-end">
Cerca nel sito
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-right" />
</svg>
</button>
</form>
</div><!-- /END MODAL CONTENT -->
</div>
</div>
</div>
</div><!--/ END SEARCH WRAPPER -->
</div><!--/ END TOP BAR UTILITIES -->
</div>
</div><!-- /END TOPBAR -->
<div class="n7-top-bar flex items-center py-1 md:py-2 px-4 n7-background-gray-02{% if mobileHidden %} hidden lg:flex{% endif %}">
<div class="n7-top-bar__container xl:container mx-auto flex items-center lg:flex-1">
<div class="n7-top-bar__navigation grid lg:flex items-center gap-2 lg:gap-8">
<!-- LINK CERTIFICAZIONE ISO -->
<a href="" class="n7-link gap-2 p-0 text-xs lg:text-sm n7-content-01">
<img src="/images/iso-27001.png" alt="ISO 27001" width="75" height="38">
Certificazione ISO/IEC 27001
</a>
<!-- Secondary nav/menu component -->
{% render '@secondary-navigation',{label: 'Secondaria', items: [{label : 'voce 1'}, { label : 'voce 2'}] }, true %}
</div>
<div class="n7-top-bar__utilities-area ml-auto">
{% if hasSearchButton %}
<!-- Search component -->
<div class="hidden lg:block">
<button type="button" id="searchModalTrigger" class="n7-btn n7-btn--secondary n7-btn--icon rounded-full w-6 h-6 md:w-10 md:h-10">
<span class="sr-only">Cerca nel sito di Artea - apri la modale</span>
{% render '@icon--small', { id: 'mini--magnifying-glass', size: 'w-4 h-4 md:w-5 md:h-5' }, true %}
</button>
<!-- Search Modal -->
<div
id="searchModal"
class="fixed items-center content-center inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full"
style="display:none;"
aria-hidden="true"
role="dialog"
aria-modal="true"
aria-labelledby="modalTitle">
<div class="relative h-full lg:h-full lg:w-full mx-auto p-6 lg:p-16 shadow-lg bg-white">
<div class="container px-16 grid gap-14">
<div class="flex justify-between items-center">
<h2 id="modalTitle" class="text-3xl md:text-5xl lg:text-6xl">Cerca nel sito di Artea</h2>
<button
id="closeModal"
class="n7-btn n7-btn--icon border-0 hover:n7-background-primary hover:text-white">
<span class="sr-only">Chiudi</span>
{% render '@icon--small', {id: 'mini--x-mark', size: 'w-8 h-8'}, true %}
</button>
</div>
<div class="modal-content">
<form role="search" class="flex gap-2">
{% render '@input-field', { classes: 'flex-1',label: 'Cerca servizi, informazioni, aiuti...', inputId: 'inputSearch', inputPlaceholder: 'Cerca', inputType: 'search'}, true %}
{% render '@button--icon-right', {label: 'Cerca nel sito', classes: 'n7-btn--primary self-end', icon: 'mini--chevron-right'}, true %}
</form>
{# <p class="is-focusable-element">focusable element if no focusable elements are present</p> #}
</div><!-- /END MODAL CONTENT -->
</div>
</div>
</div>
</div><!--/ END SEARCH WRAPPER -->
{% endif %}
</div><!--/ END TOP BAR UTILITIES -->
</div>
</div><!-- /END TOPBAR -->
{
"hasSearchButton": true
}
No notes defined.