<div class="c-toolbar">
<div class="c-toolbar__inner">
<div class="c-toolbar__left">
<a href="/components/preview/page-home-travel--default" class="c-toolbar__logo">
<img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna">
</a>
<a href="/components/preview/page-home-travel--default" class="c-toolbar__logo c-toolbar__logo--innovability">
<img src="../../images/svgs/logo-innovability.svg" class="c-logo c-logo--innovability" alt="Homepage aeroporto di Bologna">
</a>
</div>
<div class="c-toolbar__center" aria-hidden="true">
<div class="c-header__shortcuts" aria-hidden="true">
<nav class="c-navigation-shortcuts">
<ul>
<li class="has-dropdown is-active">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Voli</strong>
<span>Orari, destinazioni e info</span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Vola da Bologna</p>
<div class="c-megamenu__card-abstract">
Cerca il tuo volo o vai alla sezione <a href="#">Arrivi e partenze</a>
</div>
<div class="c-megamenu__card-form c-form">
<div class="c-megamenu__card-input">
<label for="flight-label" class="" aria-label="">
Inserisci numero volo <span class="required-marker" aria-hidden="true">*</span>
<input id="flight-id" type="text" class="" placeholder="" value="" aria-describedby="flight-note">
<p class="c-field__note " id="flight-note">
Es. AZ234 oppure Parigi
</p>
</label>
</div>
<button type="button" class="c-button ">
Cerca
</button>
</div>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<strong class="c-megamenu__listtitle">Vola da Bologna</strong>
<li><a href="/components/preview/page-arrivals-departures--default">Arrivi e partenze</a></li>
<li><a href="/components/preview/page-flights-buy-flight">Acquisto Volo</a></li>
<li><a href="/components/preview/page-flights-landing-destinations">Destinazioni</a></li>
<li><a href="/components/preview/page-flight-companies">Le nostre compagnie aeree</a></li>
<li><a href="/components/preview/page-tickets-phone">Biglietteria telefonica</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Prepara il tuo viaggio</strong>
<li><a href="/components/preview/page-routes-luggage">Bagagli</a></li>
<li><a href="/components/preview/page-routes-documents">Documenti</a></li>
<li><a href="#">Fast Track</a></li>
<li><a href="#">Viaggi e Covid-19</a></li>
<li><a href="/components/preview/page-parkings-home">Prenota un parcheggio</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Controlli in aeroporto</strong>
<li><a href="#">Controlli in partenza</a></li>
<li><a href="#">Controlli in arrivo</a></li>
</ul>
</div>
<div class="c-megamenu__crossell">
<p>Vola da Bologna e <a href="#">acquista online il tuo parcheggio</a> ad un prezzo scontato </p>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown ">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Parcheggi</strong>
<span>Soste brevi e lunghe</span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Parcheggia in aeroporto:</p>
<div class="c-megamenu__card-abstract">
Qualità e sicurezza al miglior prezzo
</div>
<a href="#" class="c-link c-link--primary">
<span>Acquista ora</span>
<svg class="svg-24">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<strong class="c-megamenu__listtitle">Parcheggia per volare</strong>
<li><a href="/components/preview/page-parkings-home">Acquista parcheggi</a></li>
<li><a href="/components/preview/page-meet-greet">Soste brevi</a></li>
<li><a href="/components/preview/page-where-to-pay">Come e dove pagare</a></li>
<li><a href="/components/preview/page-rates-conventions">Tariffe e convenzioni</a></li>
<li><a href="/components/preview/page-home-assistenze">Passeggeri a ridotta mobilità</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Parcheggia e raggiungi la città</strong>
<li><a href="#">Park & Mex</a></li>
<li><a href="/components/preview/page-transports-mex">Marconi Express</a></li>
</ul>
</div>
<div class="c-megamenu__crossell">
<p>Fino al 30% di sconto su tariffe e ingressi Vip Lounge <a href="#">acquistando online il tuo parcheggio</a></p>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown ">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>In aeroporto</strong>
<span>Lounge, shopping e servizi</span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">MBL Lounge per partire rilassati</p>
<div class="c-megamenu__card-abstract">
Area relax e ristoro, wifi, fast-track dedicato e parcheggi a tariffe scontate
</div>
<a href="/components/preview/page-lounge" class="c-link c-link--primary">
<span>Prenota VIP Lounge</span>
<svg class="svg-24">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<strong class="c-megamenu__listtitle">Lounge e Servizi Premium</strong>
<li><a href="/components/preview/page-lounge">MBL VIP Lounge</a></li>
<li><a href="/components/preview/page-youfirst">Youfirst</a></li>
<li><a href="/components/preview/page-area-meeting">Meeting area</a></li>
<li><a href="/components/preview/page-fitness">Palestre</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Negozi e Ristoranti</strong>
<li><a href="/components/preview/page-shopping-listing">Fashion & Style</a></li>
<li><a href="/components/preview/page-shopping-listing">General stores</a></li>
<li><a href="/components/preview/page-shopping-listing">Bar</a></li>
<li><a href="/components/preview/page-shopping-listing">Ristoranti</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Servizi</strong>
<li><a href="/components/preview/page-home-customer-care">Bagagli Smarriti</a></li>
<li><a href="/components/preview/page-home-customer-care">Cambio valuta</a></li>
<li><a href="/components/preview/page-home-customer-care">Tutti i servizi al passeggero</a></li>
</ul>
</div>
<div class="c-megamenu__crossell">
<p><a href="#">Acquista online Ingressi Vip Lounge</a> e avrai tariffe deicate per il tuo parcheggio</p>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown ">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Da e per l’aeroporto</strong>
<span>Trasporti pubblici e auto</span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Raggiungi la città in una manciata di minuti</p>
<div class="c-megamenu__card-abstract">
</div>
<a href="#" class="c-link c-link--primary">
<span>Scopri</span>
<svg class="svg-24">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<strong class="c-megamenu__listtitle">Trasporti pubblici da e per BLQ</strong>
<li><a href="/components/preview/page-transports-bus">Bus</a></li>
<li><a href="/components/preview/page-transports-taxi">Taxi</a></li>
<li><a href="/components/preview/page-transports-mex">Navetta Marconi Express</a></li>
<li><a href="/components/preview/page-transports-train">Treni</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Auto e trasporti privati</strong>
<li><a href="/components/preview/page-transports-car">Arrivare con l’auto</a></li>
<li><a href="/components/preview/page-transports-rent-car">Noleggio auto</a></li>
<li><a href="/components/preview/page-transports-rent-car">Noleggio con conducente</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
<li class="has-dropdown ">
<div class="c-navigation-shortcuts__dropdown o-collapsible">
<div class="o-collapsible__title js-collapsible-title ">
<strong>Necessità particolari</strong>
<span>Accessibilità, Famiglie, Animali</span>
</div>
<div class="c-navigation-shortcuts__megamenu">
<div class="c-megamenu">
<div class="c-megamenu__card">
<div class="c-megamenu__card-overlay">
</div>
<div class="c-megamenu__card-content">
<p class="c-megamenu__card-title">Siamo a tua disposizione</p>
<div class="c-megamenu__card-abstract">
</div>
<a href="#" class="c-link c-link--primary">
<span>Hai bisogno di aiuto?</span>
<svg class="svg-24">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
</div>
</div>
<div class="c-megamenu__main">
<div class="c-megamenu__lists">
<ul>
<strong class="c-megamenu__listtitle">Assistenze speciali</strong>
<li><a href="/components/preview/page-routes-prm">Modalità di richiesta assistenza</a></li>
<li><a href="/components/preview/page-routes-prm-airport">Arrivo in aeroporto</a></li>
<li><a href="/components/preview/page-routes-prm-services">Servizi dedicati</a></li>
<li><a href="/components/preview/page-routes-prm-rights">Diritti e qualità del servizio</a></li>
<li><a href="/components/preview/page-home-assistenze">Autismo</a></li>
<li><a href="/components/preview/page-home-assistenze">Sordità - Servizio Tellis</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Famiglie e minori</strong>
<li><a href="/components/preview/page-home-assistenze">In aeroporto</a></li>
<li><a href="/components/preview/page-home-assistenze">Minori che viaggiano da soli</a></li>
</ul>
<ul>
<strong class="c-megamenu__listtitle">Animali al seguito</strong>
<li><a href="/components/preview/page-routes-animals">Regole per il trasporto</a></li>
<li><a href="/components/preview/page-routes-animals-ue">Paesi U.E.</a></li>
<li><a href="/components/preview/page-routes-animals-xue">Paesi Extra U.E.</a></li>
</ul>
</div>
</div>
<button type="button" class="c-navigation-shortcuts__closemegamenu js-closeMegaMenu" aria-label="Chiudi la guida del passeggero">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-megamenu__overlay"></div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="c-toolbar__right">
<a class="c-toolbar__assistance" href="../preview/page-home-assistenze.html">
<span class="u-visuallyhidden">Assistenze speciali</span>
<img src="../../images/svgs/icon_ special_assistance_24px.svg" class="prm-icon" alt="">
</a>
<div class="c-menu">
<input type="checkbox" role="button" aria-haspopup="true" id="mtoggle" class="u-visuallyhidden">
<label for="mtoggle" data-opens-menu>
<div class="c-menu__icon">
<img src="../../images/svgs/stk_profile_man-white.svg" alt="" aria-hidden="true" width="24">
<p class="c-menu__notify" aria-hidden="true">2</p>
</div>
</label>
<div role="menu" data-menu-origin="right">
<div class="c-menu__booked-item c-menu__booked-item--multiple ">
<a href="../preview/page-reservation-detail.html" class="clickable-item">
<div class="c-media o-media c-media--booked-item">
<img class="c-media__figure o-media__figure" src="../../images/svgs/p1-2.svg" alt="Parcheggio P1 P2" height="" width="40">
<div class="c-media__body o-media__body">
Oggi hai un parcheggio prenotato al P1-2 <strong>alle ore 13:45</strong>
</div>
</div>
</a>
<a href="../preview/page-reservations-list.html">Vedi le altre prenotazioni di oggi</a>
</div>
<div class="c-menu__section">
<div class="image">
<img src="../../images/svgs/stk_prenotazioni.svg" alt="Prenotazioni" aria-hidden="true" width="60">
</div>
<ul aria-label="Prenotazioni">
<strong aria-hidden="true" class="title">Prenotazioni</strong>
<li><a href="../preview/page-dashboard.html">Dashboard</a></li>
<li><a href="../preview/page-reservations-list.html">Le tue prenotazioni</a></li>
<li><a href="../preview/page-orders-list.html">I tuoi ordini</a></li>
<li><a href="#">I tuoi voucher digitali (130 €)</a></li>
</ul>
</div>
<div class="c-menu__section">
<div class="image">
<img src="../../images/svgs/stk_avatar.svg" alt="Profilo" aria-hidden="true" width="60">
</div>
<ul aria-label="Profilo">
<strong aria-hidden="true" class="title">Profilo</strong>
<li><a href="../preview/page-profile--default.html">Il tuo account</a></li>
<li><a href="../preview/page-billing-info.html">I tuoi dati di fatturazione</a></li>
<li><a href="../preview/page-privacy-settings.html">Le tue impostazioni privacy</a></li>
<li><a href="../preview/page-newsletter-sub.html">Le tue impostazioni newsletter</a></li>
</ul>
</div>
<div class="c-menu__section">
<div class="image">
<img src="../../images/svgs/stk_assistenza.svg" alt="Supporto" aria-hidden="true" width="60">
</div>
<ul aria-label="Supporto">
<strong aria-hidden="true" class="title">Supporto</strong>
<li><a href="#">Richiedi assistenza</a></li>
<li><a href="../preview/page-reclaims-list.html">I tuoi suggerimenti e reclami</a></li>
<li><a href="#">Richiedi assistenza</a></li>
</ul>
</div>
<a href="#" class="c-menu__invite">Esci</a>
</div>
</div>
<button type="button" class="c-button c-toolbar__icon is-clickable js-fr-dialogmodal-open" aria-label="Cerca nel sito" aria-controls="dialog-search">
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_search_black_24px"></use>
</svg>
</button>
<div class="c-notifications ">
<button type="button" class="c-notifications__button has-indicator js-toggleNotificationsBtn" aria-expanded="false" aria-label="Notifiche" aria-controls="aria-notifications">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic_notifications_active_black_24px"></use>
</svg>
<p class="c-notifications__indicator" aria-hidden="true">2</p>
</button>
<div class="c-notifications__box is-narrow has-indicator js-notificationsBox" aria-live="polite" id="aria-notifications">
<div class="c-notifications__head">
<div class="c-notifications__title">
Centro notifiche
</div>
<button type="button" class="c-notifications__closeBtn js-toggleNotificationsBtn" aria-expanded="false" aria-label="Chiudi" aria-controls="aria-notifications">
Chiudi <svg class="c-icon c-icon--16">
<use xlink:href="#ic_close_black_24px"></use>
</svg>
</button>
</div>
<ul class="c-notifications__list">
<li class="important not-read">
<span class="c-notifications__title">Lorem ipsum dolor sit amet</span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="not-read">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<p>Prevista forte nevicata il 5 Dicembre dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
<li class="">
<span class="c-notifications__title"></span>
<p><strong>Prevista forte nevicata il 5 Dicembre</strong> dalle ore 10:00 alle ore 17:00. Parti prima e arriva per tempo in aeroporto.</p>
<a class="c-notifications__link" href="#">></a>
</li>
</ul>
</div>
</div>
<div class="c-header__switch c-toolbar__icon c-toolbar__switch is-clickable">
<div data-menu-component class='c-navigation-switch'>
<input type='checkbox' role='button' aria-haspopup='true' id='toggle-extended-nav' class='u-visuallyhidden' aria-hidden='true' />
<label for='toggle-extended-nav' data-opens-menu aria-hidden='true'>
<span class='u-visuallyhidden expanded-text'>
Chiudi menù
</span>
<span class='u-visuallyhidden collapsed-text'>
Apri menù
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="c-dialog c-dialog--search js-fr-dialogmodal " id="dialog-search">
<div class="js-fr-dialogmodal-modal">
<div role="document">
<div class="c-expanded-search ">
<form class="c-expanded-search__searchWrapper c-form">
<label for="search-field" class=" has-button" aria-label="">
Cerca nel sito
<input id="search-field" type="text" class="js-combobox " placeholder="" value="" aria-describedby="search-field-note" list="search-destinations" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-help-text="Premi il tasto TAB o le frecce direzionali per accedere e navigare attraverso i suggerimenti. Conferma la tua scelta col tasto INVIO, oppure premi il tasto ESC per chiudere la lista dei suggerimenti." data-suggestion-single="C'è " data-suggestion-plural="Ci sono " data-suggestion-word="Suggerimento" data-suggestion-word-plural="Suggerimenti" data-combobox-see-more-text="Guarda più risultati">
<button type="submit" class="c-button c-button--submit c-button--searchIcon " aria-label="Avvia la ricerca">
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_search_black_24px"></use>
</svg> </button>
<datalist id="search-destinations">
<option value="Check in A">
<option value="Check in B">
<option value="Check in C">
<option value="Accettazione">
<option value="Cafè">
<option value="Bagagli">
<option value="Bar centrale">
</datalist>
<p class="c-field__note " id="search-field-note">
Scrivi ciò che vuoi cercare es: <strong>arrivi</strong>, <strong>bagagli</strong>, <strong>VIP lounge</strong>, etc …
</p>
</label>
<p class="c-expanded-search__search-flight">
<a href="../preview/page-arrivals-departures--default.html">Stai cercando un volo?→</a>
</p>
<div class="c-search-suggestions">
<h3>Potrebbero esserti utili</h3>
<ul class="c-search-suggestions__list">
<li class="c-search-suggestions__item">
<a href="#">Ultimi aggiornamenti covid <span aria-hidden="true">→</span></a>
</li>
<li class="c-search-suggestions__item">
<a href="#">Parcheggia in aeroporto <span aria-hidden="true">→</span></a>
</li>
<li class="c-search-suggestions__item">
<a href="#">Contatti e supporto <span aria-hidden="true">→</span></a>
</li>
<li class="c-search-suggestions__item">
<a href="#">Fast track <span aria-hidden="true">→</span></a>
</li>
</ul>
</div>
</form>
<button type="button" class="c-expanded-search__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
Chiudi
<svg class="c-icon c-icon--18">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
</div>
</div>
</div>
<div class="c-toolbar">
<div class="c-toolbar__inner">
<div class="c-toolbar__left">
<a href="{{ home-url }}" class="c-toolbar__logo">
{{ render "@logo" }}
</a>
<a href="{{ innovability-url }}" class="c-toolbar__logo c-toolbar__logo--innovability">
{{ render "@logo--innovability" }}
</a>
</div>
<div class="c-toolbar__center" aria-hidden="true">
<div class="c-header__shortcuts" aria-hidden="true">
{{ render "@shortcuts-navigation" shortcuts merge=true }}
</div>
</div>
<div class="c-toolbar__right">
<a class="c-toolbar__assistance" href="{{ path '/components/preview/page-home-assistenze' }}">
<span class="u-visuallyhidden">Assistenze speciali</span>
<img src="{{ path '/images/svgs/icon_ special_assistance_24px.svg' }}" class="prm-icon" alt="">
</a>
{{#if logged-user}} {{ render "@menu--existing-user-toolbar" }} {{/if}} {{#if recognized-user }} {{ render "@menu--recognized-user-toolbar"
}} {{/if}} {{#if anonymous-user }} {{ render "@menu--anonymous-user-toolbar" }} {{/if}}
{{!-- <label for="adb-search" class="c-toolbar__icon c-toolbar__search is-clickable" aria-label="Cerca nel sito. Premi per iniziare la ricerca">
{{> @icon class="c-icon c-icon--18" symbol="ic_search_black_24px" }}
</label> --}}
{{> @button search-button }}
{{ render "@notifications" }}
<div class="c-header__switch c-toolbar__icon c-toolbar__switch is-clickable">
{{> @navigation-switch}}
</div>
</div>
</div>
</div>
{{ render "@dialog--search" }}
{{!-- {{ render "@expanded-search" }} --}}
{
"name": "default",
"home-url": "/components/preview/page-home-travel--default",
"innovability-url": "/components/preview/page-home-travel--default",
"prm-url": "/components/preview/page-routes-prm",
"ccare-url": "",
"dropdown-toolbar": {
"dropdown-orientation": {
"main-language": {
"text": "ita",
"url": "#",
"aria-label": "Italiano"
},
"sub-languages": [
{
"text": "eng",
"url": "#",
"aria-label": "Inglese"
},
{
"text": "zh",
"url": "#",
"aria-label": "Cinese"
}
]
}
},
"search-button": {
"type": "button",
"modifier": "c-toolbar__icon is-clickable js-fr-dialogmodal-open",
"opens-dialog": "dialog-search",
"aria-label": "Cerca nel sito",
"svg": {
"class": "c-icon c-icon--18",
"symbol": "ic_search_black_24px"
}
},
"logged-user": true,
"recognized-user": false,
"anonymous-user": false
}
$toolbar-bg: secondary(soft, 100);
$toolbar-color: secondary(text, 100);
.c-toolbar {
// color: $toolbar-color;
background-color: $toolbar-bg;
padding: remify(16px) remify(16px);
.c-header--emergency & {
background-color: primary(emergency, 120);
}
}
.c-toolbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: remify(1360px);
margin: 0 auto;
}
.c-toolbar a:focus {
@include outline;
}
.c-toolbar__center {
display: none;
@include min-screen(bp(tablet-p)) {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: flex-start;
}
}
.c-toolbar__left {
display: flex;
align-items: center;
justify-content: flex-start;
}
.c-toolbar__right {
justify-self: flex-end;
margin-left: auto;
display: flex;
justify-content: flex-end;
position: relative;
.c-toolbar__bell {
display: none;
}
@include min-screen(bp(tablet-p)) {
.c-toolbar__user,
.c-toolbar__switch,
.c-toolbar__assistance {
display: none;
}
.c-toolbar__bell {
display: flex;
}
}
.c-toolbar__icon,
.c-menu {
min-width: remify(36px);
height: remify(36px);
@include min-screen(bp(tablet-p)) {
width: auto;
min-width: remify(40px);
height: remify(40px);
}
@include min-screen(bp(tablet-l)) {
width: auto;
min-width: remify(48px);
height: remify(48px);
}
}
.c-toolbar__user {
background-color: primary(night, 120);
}
.c-toolbar__search {
background-color: primary(night, 100);
}
.c-toolbar__switch {
background-color: primary(night, 80);
&.is-nav-open {
background-color: primary(sun, 100);
}
}
.c-menu {
background-color: primary(night, 120);
border-radius: remify(12px);
text-align: center;
justify-content: center;
display: flex;
@include min-screen(bp(tablet-p)) {
display: none;
}
.c-menu__section {
text-align: left;
}
}
& div[role="menu"] {
top: remify(32px);
}
}
.c-toolbar__assistance {
margin: 0 remify(8px) 0 0;
padding: 0 remify(8px) 0 0;
border-right: remify(1px) solid primary(night, 40);
display: flex;
justify-content: center;
align-items: center;
svg {
vertical-align: middle;
fill: primary(night, 120);
}
.prm-icon {
width: remify(36px);
}
}
.c-toolbar__icon {
display: flex;
align-items: center;
justify-content: center;
background-color: primary(night, 100);
border-radius: remify(12px);
position: relative; // min-width: remify(40px);
height: remify(40px);
color: #fff;
text-decoration: none;
padding: remify(8px);
margin-left: remify(8px);
&:last-of-type {
margin-right: 0;
}
&:focus {
@include outline;
}
span {
display: none;
@include min-screen(remify(1100px)) {
display: inline-block;
margin-left: remify(8px);
}
}
}
.c-toolbar .is-clickable svg {
* {
fill: currentColor;
}
}
.c-toolbar__bell {
background-color: primary(sun, 120);
color: currentColor;
}
.c-toolbar__bell svg {
* {
fill: currentColor;
}
}
.c-toolbar__search.is-open {
@include max-screen(bp(tablet-p)) {
background-color: primary(sun, 120);
}
}
/*------------------------------------*\
Modifier c-toolbar--minimal
\*------------------------------------*/
.c-toolbar--minimal {
.c-toolbar__left .back-to-results {
display: none;
@include min-screen(bp(tablet)) {
display: block;
}
}
.c-toolbar__right .textual {
display: none;
@include min-screen(bp(tablet)) {
display: block;
}
}
.c-toolbar__right .iconographic {
@include min-screen(bp(tablet)) {
display: none;
}
}
}
/*------------------------------------*\
Modifier c-toolbar--progress
\*------------------------------------*/
.c-toolbar--progress {
.c-toolbar__inner {
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
}
.c-toolbar__left {
order: 1
}
.c-toolbar__center {
display: block;
order: 3;
flex-basis: 100%;
@include min-screen(bp(tablet-p)) {
order: 2;
flex-basis: 45%;
}
}
.c-toolbar__right {
order: 2;
@include min-screen(bp(tablet-p)) {
order: 3;
}
.c-menu {
display: flex;
background-color: transparent;
}
}
.c-toolbar__left,
.c-toolbar__right {
flex-basis: auto;
}
}
/*------------------------------------*\
Modifier c-toolbar--clean
\*------------------------------------*/
.c-toolbar--clean {
.c-toolbar__inner {
justify-content: center;
}
}
/*------------------------------------*\
Modifier c-toolbar--language
\*------------------------------------*/
.c-toolbar--language {
.c-toolbar__right {
flex-direction: column;
align-items: flex-end;
}
}
/*------------------------------------*\
EMERGENCY NAV
\*------------------------------------*/
.c-toolbar__emergency-nav {
background-color: primary(sky, 20);
padding: remify(12px);
text-align: center;
@include min-screen(bp(tablet-p)) {
display: none;
}
ul {
li {
display: inline-block;
padding: 0 remify(6px);
a { font-weight: fw(bold);}
}
}
}
(function ($) {
'use strict';
if (!$.tangible) {
$.tangible = new Object();
};
$.tangible.navToolbar = function (el, options) {
var base = this;
base.$el = $(el);
base.el = el;
base.init = function () {
base.$InputSearch = $('.c-toolbar__search');
base.$ExpandedSearch = $('.c-expanded-search');
base.$closeBtn = $('.js-closeExpandedSearch');
// Generates an array of all the focusable elements within the dialog
base.focusableEls = base.$ExpandedSearch.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
base.focusableEls = Array.prototype.slice.call(base.focusableEls);
// Gets the first of these focusable elements
base.firstFocusableEl = base.focusableEls[0];
// Gets the last of these focusable elements
base.lastFocusableEl = base.focusableEls[base.focusableEls.length - 1];
// Focus event on input search
base.$InputSearch.click(function () {
base.showExpandedSearch(base.$ExpandedSearch);
});
// Event once you press TAB with search input focused
base.$InputSearch.keydown(function (e) {
var code = e.keyCode || e.which;
// 9 TAB button
// 27 ESC button
if (code == '9' || code == '27') {
base.closeExpandedSearch();
}
});
// Click event on close button
base.$closeBtn.click(function () {
base.closeExpandedSearch();
});
};
// Opens the search dialog
base.showExpandedSearch = function (el) {
el.toggleClass('is-visible');
base.$InputSearch.toggleClass('is-open');
// When the dialog is first opened, it can determines which element opened it
this.focusedElBeforeOpen = document.activeElement;
};
// Closes the search dialog
base.closeExpandedSearch = function () {
base.$ExpandedSearch.removeClass('is-visible');
base.$InputSearch.removeClass('is-open');
// When the dialog is then closed, it resets the focus
this.focusedElBeforeOpen.blur();
};
// Sets focus on dialogs elements
base.focusOnDialogEls = function () {
base.firstFocusableEl.focus();
};
base.init();
};
$.fn.tangible_navToolbar = function (options) {
return this.each(function () {
(new $.tangible.navToolbar(this, options));
});
};
})(jQuery);
No notes defined.