<header class="rtds-header rtds-shadow-md" id="siteHeader" aria-label="Header del sito">
<!-- Top bar con modale ricerca desktop con search-bar -->
<div class="rtds-top-bar rtds-py-1 md:rtds-py-2 rtds-px-4 rtds-hidden lg:rtds-flex">
<div class="rtds-top-bar__container rtds-container">
<div class="rtds-top-bar__navigation rtds-grid lg:rtds-flex rtds-items-center rtds-gap-2 lg:rtds-gap-8">
<!-- Secondary nav/menu component -->
<nav class="rtds-secondary-navigation" aria-label="Secondaria">
<ul class="rtds-secondary-navigation__list rtds-gap-2">
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
Uffici
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
URP
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
PEC
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
Mappa del sito
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
Amministrazione trasparente
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-text-xs xl:rtds-text-sm rtds-content-01">
Intranet
</a>
</li>
</ul>
</nav>
</div>
<div class="rtds-top-bar__utilities-area rtds-flex lg:rtds-gap-4 xl:rtds-gap-6 rtds-ml-auto">
<!-- Social links component -->
<div class="rtds-social-links rtds-grid rtds-gap-1 md:rtds-flex md:rtds-gap-6 ">
<ul id="headerSocial" class="rtds-flex rtds-items-center rtds-gap-4 lg:rtds-gap-2 xl:rtds-gap-4 rtds-flex-wrap rtds-p-2 lg:rtds-p-0">
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al profilo Facebook di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--facebook" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al profilo X di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--x" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al canale Telegram di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--telegram" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al canale Youtube di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--youtube" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al canale Instagram di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--instagram" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al profilo Flickr di Regione Toscana</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--flickr" />
</svg>
</a>
</li>
</ul>
</div>
<div class="rtds-vertical-divider rtds-w-1e rtds-flex">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<!-- Search Modal Desktop -->
<!-- Desktop Search Modal -->
<div class="rtds-search-modal-desktop__wrapper rtds-hidden lg:rtds-block">
<button type="button" aria-haspopup="dialog" aria-controls="searchModal" aria-expanded="false" id="searchModalTrigger" class="rtds-btn rtds-btn--outline rtds-btn--icon rtds-w-6 rtds-h-6 md:rtds-w-10 md:rtds-h-10 rtds-border-gray-03 hover:rtds-button-primary-hover focus:rtds-button-primary-hover active:rtds-button-primary-hover hover:rtds-text-white focus:rtds-text-white active:rtds-text-white">
<span class="rtds-sr-only">Cerca nel sito - apri la modale</span>
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
<!-- Search Modal -->
<div id="searchModal" class="rtds-search-modal-desktop rtds-fixed rtds-items-center rtds-content-center rtds-inset-0 rtds-bg-black rtds-bg-opacity-50 rtds-overflow-y-auto rtds-h-full rtds-w-full" style="display:none;" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle" data-trigger-id="searchModalTrigger" data-close-button-id="closeModal">
<div class="rtds-relative rtds-h-full lg:rtds-h-full lg:rtds-w-full rtds-mx-auto rtds-p-6 lg:rtds-p-16 rtds-shadow-lg rtds-bg-white">
<div class="rtds-modal-content rtds-container rtds-px-16 rtds-grid rtds-gap-14">
<div class="rtds-flex rtds-justify-between rtds-items-center">
<h2 id="modalTitle" class="rtds-text-3xl md:rtds-text-5xl lg:rtds-text-6xl">Cerca nel sito</h2>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-btn--icon rtds-border-0 hover:rtds-background-primary hover:rtds-text-white" id="closeModal"><svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">
Chiudi
</span>
</button>
</div>
<!-- Search Bar Component -->
<div class="rtds-w-full">
<div class="rtds-search-bar" data-search-bar data-all-results-href="/search?q=" data-all-results-label="Tutti i risultati">
<form class="rtds-search-bar__form" role="search" action="/search" method="get">
<div class="rtds-search-bar__wrapper rtds-grid rtds-gap-2">
<label for="desktopSearchBar" class="rtds-search-bar__label rtds-text-base md:rtds-text-lg rtds-font-medium rtds-content-03 ">
Cerca
</label>
<div class="rtds-search-bar__input-wrapper">
<div class="rtds-search-bar__autocomplete" id="desktopSearchBarContainer" data-placeholder="Search"></div>
<button type="button" class="rtds-btn rtds-btn--icon rtds-btn--l rtds-search-bar__clear rtds-border-0 rtds-hidden hover:rtds-background-secondary hover:rtds-text-white" data-search-clear>
<span class="rtds-sr-only">Cancella ricerca</span>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--x-circle" />
</svg>
</button>
<button type="submit" class="rtds-btn
r rtds-btn--icon rtds-btn--icon-square rtds-btn--primary rtds-search-bar__submit rtds-btn--l"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
<span class="rtds-sr-only">
Cerca
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div><!-- /END MODAL CONTENT -->
</div>
</div>
</div>
</div>
<!--/ END TOP BAR UTILITIES -->
</div>
</div><!-- /END TOPBAR -->
<!-- Main heading -->
<div class="rtds-main-heading">
<div class="rtds-main-heading__container rtds-container rtds-mx-auto rtds-flex rtds-items-center rtds-flex-1">
<div class="rtds-site-branding rtds-branding">
<a class="rtds-site-logo rtds-logo--main rtds-logo--main rtds-w-auto" href="#">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="/images/logo.png" alt="Alt logo image" width="326" height="95" />
</a>
<div class="rtds-vertical-divider rtds-w-4 rtds-h-10 md:rtds-w-10 md:rtds-h-20">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<div class="rtds-site-branding__secondary">
<div class="rtds-site-logo rtds-logo--secondary rtds-logo--secondary rtds-w-auto">
<img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="/images/logo.png" alt="Alt logo image" width="248" height="81" />
</div>
</div>
</div>
<div class="rtds-main-headings__center rtds-flex-1 lg:rtds-ml-auto lg:rtds-justify-end">
<div class="rtds-flex rtds-gap-3 rtds-justify-end">
<!-- Mobile Search Trigger and Modal -->
<div class="rtds-search-bar__mobile-wrapper">
<!-- Mobile Search Trigger -->
<div class="rtds-main-heading__mobile-search rtds-flex lg:rtds-hidden">
<button type="button" aria-haspopup="dialog" aria-controls="searchModalMobile" aria-expanded="false" id="searchModalMobileTrigger" class="rtds-btn rtds-btn--outline rtds-btn--icon hover:rtds-button-primary-hover focus:rtds-button-primary-hover active:rtds-button-primary-hover hover:rtds-text-white focus:rtds-text-white active:rtds-text-white">
<span class="rtds-sr-only">Cerca nel sito - apri la modale</span>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
</div>
<!-- Mobile Search Modal -->
<div id="searchModalMobile" class="rtds-search-bar__modal rtds-fixed rtds-items-start rtds-content-center rtds-inset-0 rtds-background-01 rtds-overflow-y-auto rtds-h-full rtds-w-full lg:rtds-hidden" style="display:none;" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="mobileSearchModalTitle" data-trigger-id="searchModalMobileTrigger" data-close-button-id="closeMobileSearchModal">
<div class="rtds-relative rtds-w-full rtds-min-h-full rtds-bg-background-01 rtds-p-4">
<div class="rtds-flex rtds-flex-col rtds-gap-3 rtds-max-w-full">
<!-- Modal Header -->
<div class="rtds-flex rtds-justify-between rtds-items-center rtds-px-0 rtds-py-0">
<h2 id="mobileSearchModalTitle" class="rtds-text-lg rtds-font-bold rtds-content-01">Cerca nel sito</h2>
<button type="button" class="rtds-btn
rtds-btn--icon rtds-btn--icon-square rtds-border-0 hover:rtds-background-primary hover:rtds-text-white" id="closeMobileSearchModal"><svg class="rtds-icon rtds-fill-current rtds-w-10 rtds-h-10" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">
Chiudi modale di ricerca
</span>
</button>
</div>
<!-- Search Bar Component -->
<div class="rtds-w-full">
<div class="rtds-search-bar rtds-search-bar--mobile-modal" data-search-bar data-all-results-href="/search?q=" data-all-results-label="Tutti i risultati">
<form class="rtds-search-bar__form" role="search" action="/search" method="get">
<div class="rtds-search-bar__wrapper">
<label for="mobileSearchBar" class="rtds-search-bar__label rtds-sr-only">
Cerca
</label>
<div class="rtds-search-bar__input-wrapper">
<div class="rtds-search-bar__autocomplete" id="mobileSearchBarContainer" data-placeholder="Search"></div>
<button type="button" class="rtds-btn rtds-btn--icon rtds-btn--l rtds-search-bar__clear rtds-border-0 rtds-hidden hover:rtds-background-secondary hover:rtds-text-white" data-search-clear>
<span class="rtds-sr-only">Cancella ricerca</span>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--x-circle" />
</svg>
</button>
<button type="submit" class="rtds-btn
r rtds-btn--icon rtds-btn--icon-square rtds-btn--primary rtds-search-bar__submit rtds-btn--l"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
<span class="rtds-sr-only">
Cerca
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="rtds-primary-navigation lg:rtds-justify-end" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="rtds-btn rtds-btn--only-text rtds-rounded-0 lg:rtds-hidden rtds-ml-auto rtds-btn--icon rtds-group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-m-0 rtds-p-0
rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform
group-hover:rtds-translate-none is-show-menu
group-aria-expanded:rtds-hidden" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--bars-3" />
</svg>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-m-0 rtds-p-0 rtds-transition-all
rtds-duration-200 rtds-ease-out rtds-transform
group-hover:rtds-translate-none is-close-menu rtds-hidden
group-aria-expanded:rtds-inline-block" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only is-show-menu">
Menu
</span>
</button>
<!-- Mobile panel -->
<div class="rtds-primary-navigation__panel" id="mainNavPanel">
<!-- Main nav -->
<div class="rtds-primary-navigation__module is-main lg:rtds-border-b-0">
<ul class="rtds-primary-navigation__list ">
<li class="rtds-primary-navigation__item">
<a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-base xl:rtds-text-lg">
Item
</a>
</li>
<li class="rtds-primary-navigation__item">
<a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-base xl:rtds-text-lg is-current" aria-current="page">
Current page
</a>
</li>
<li class="rtds-dropdown-menu has-dropdown-menu rtds-primary-navigation__item">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center hover:rtds-content-primary aria-expanded:rtds-bg-white lg:aria-expanded:rtds-bg-transparent aria-expanded:rtds-content-primary aria-expanded:rtds-relative rtds-p-3 rtds-gap-2 rtds-text-base xl:rtds-text-lg rtds-primary-navigation__first-level rtds-primary-navigation__link" aria-expanded="false" aria-controls="submenumenu-3">
Dropdown
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="rtds-dropdown-menu__list rtds-hidden rtds-border rtds-border-t-0 lg:rtds-w-52 lg:rtds-border-t lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute rtds-border-r-0 rtds-border-l-0 lg:rtds-border-r lg:rtds-border-l" id="submenumenu-3">
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-base xl:rtds-text-lg group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- Mobile search in panel -->
<div class="rtds-primary-navigation__module is-main lg:rtds-hidden is-last-element">
<form role="search" class="rtds-flex rtds-items-end rtds-p-3 rtds-gap-1">
<div class="rtds-input-field rtds-gap-1 rtds-flex-1 ">
<label for="inputSearchMobile" class="rtds-input-field__label">
Cerca
servizi, informazioni, aiuti...
</label>
<div class="rtds-input">
<input id="inputSearchMobile" class="rtds-rounded-l-lg rtds-rounded-r-none rtds-text-sm rtds-input-placeholder" type="search" placeholder="Cerca">
</div>
</div>
<button type="button" class="rtds-btn rtds-btn--secondary rtds-btn--icon rtds-w-11 rtds-h-11 rtds-rounded-lg">
<span class="rtds-sr-only">Cerca</span>
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--magnifying-glass" />
</svg>
</button>
</form>
</div>
</div>
<div class="rtds-primary-navigation__backdrop rtds-bg-black/25 rtds-top-[--header-height] lg:rtds-hidden"></div>
</nav>
</div>
</div>
</div>
</div>
<div class="rtds-bottom-bar lg:rtds-py-2 is-second-last">
<nav class="lg:rtds-container lg:rtds-flex lg:rtds-justify-center" aria-label="Label navigazione bottom">
<ul class="rtds-grid lg:rtds-flex rtds-gap-4">
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-content-01 rtds-font-medium rtds-text-sm lg:rtds-text-base">
Item 1
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-content-01 rtds-font-medium rtds-text-sm lg:rtds-text-base">
Item 2
</a>
</li>
<li class="">
<a href="" class="rtds-link rtds-p-2 rtds-content-01 rtds-font-medium rtds-text-sm lg:rtds-text-base">
Item 3
</a>
</li>
</ul>
</nav>
</div>
</header>
{% extends '@header' %}
{% block topBar %}
<!-- Top bar con modale ricerca desktop con search-bar -->
{% render '@top-bar', {
hasSecondaryNav: 'true',
hasSearchButton: 'true',
hasTopBarSocial: 'true',
mobileHidden: 'true',
searchModalVariant: 'with-search-bar'
}, true %}
{% endblock topBar %}
{% block mainHeading %}
<!-- Main heading -->
{% render '@main-heading', {logoDivider: 'true', secondLogo: 'true', hasMobileSearch: 'true'}, true %}
{% endblock mainHeading %}
{
"hasShadow": true,
"hasBottomBar": true
}
/**
* PRIMARY NAVIGATION
*
*/
@layer components {
.rtds-header {
@apply md-max-w-480-min-h:rtds-pt-[--header-offset] lg-min-w-480-min-h:rtds-pt-[--topbar-offset] rtds-z-30;
}
.rtds-main-heading__mobile-search {
@apply rtds-ml-auto;
}
}
/* HEADER SCRIPT - mobile management */
document.addEventListener('DOMContentLoaded', function () {
'use strict';
if (document.querySelector('.rtds-header')) {
/* GLOBAL VARIABLES */
var rootElement = document.documentElement;
var siteHeader = document.querySelector('.rtds-header');
var mainHeading = document.querySelector('.rtds-main-heading');
// var breadcrumb = document.querySelector('.rtds-breadcrumb');
var headerHeight;
// var breadcrumbHeight;
var mainMenuWrapper = document.getElementById('mainNavPanel');
var headerLinkRight = document.querySelector('.rtds-header-link-right');
var headerSocialLinks = document.querySelector('.rtds-social-links');
var headerSecondaryNav = document.querySelector('.rtds-top-bar__navigation');
var mobilePanelLastEl = document.querySelector('.is-last-element');
var headerMainActions = document.querySelector('.rtds-main-heading__actions');
var SiteMenuWrapper = document.getElementById('siteNavWrapper');
var mobilePanelSecondLastEl = document.querySelector('.is-second-last');
/* FUNCTIONS */
function toggleIcon(icon) {
if (icon.classList.contains('is-hidden')) {
icon.classList.remove('is-hidden');
icon.classList.add('is-visible');
} else if (icon.classList.contains('is-visible')) {
icon.classList.remove('is-visible');
icon.classList.add('is-hidden');
}
}
function calculateSiteHeader(header) {
headerHeight = header.offsetHeight;
rootElement.style.setProperty('--header-offset', headerHeight + 'px');
}
// function calculateBreadcrumbHeader(breadcrumb) {
// breadcrumbHeight = breadcrumb.offsetHeight;
// rootElement.style.setProperty('--breadcrumb-height', breadcrumbHeight + 'px');
// }
function ariaExpandedToggle(target) {
if (target.getAttribute('aria-expanded') === "false") {
target.setAttribute('aria-expanded', 'true');
} else {
target.setAttribute('aria-expanded', 'false');
}
}
function openOffCanvasMenu(button, targetMenu) {
button.classList.toggle('is-selected');
ariaExpandedToggle(button);
targetMenu.classList.toggle('is-open');
document.documentElement.classList.toggle('!rtds-overflow-hidden');
}
function closeMobileMenu() {
if (document.documentElement.classList.contains('!rtds-overflow-hidden')) {
document.documentElement.classList.remove('!rtds-overflow-hidden');
}
mainMenuWrapper.classList.remove('is-open');
document.getElementById('mobileNavToggle').setAttribute('aria-expanded', 'false');
document.getElementById('mobileNavToggle').classList.remove('is-selected');
}
function wrapAndAppend(wrapperClass, elementToWrap, parentElement) {
// Controlla se l'elemento da avvolgere è già contenuto in un wrapperDiv con la stessa classe
var existingWrapper = elementToWrap.closest('.' + wrapperClass);
// Se l'elemento è già avvolto, utilizza il wrapper esistente anziché crearne uno nuovo
if (existingWrapper) {
existingWrapper.appendChild(elementToWrap);
} else {
// Altrimenti, crea un nuovo wrapperDiv
var wrapperDiv = document.createElement('div');
wrapperDiv.classList.add(wrapperClass);
wrapperDiv.appendChild(elementToWrap);
// Prependi il wrapperDiv al parentElement
parentElement.appendChild(wrapperDiv);
if (mobilePanelLastEl) {
parentElement.insertBefore(wrapperDiv, mobilePanelLastEl);
} else {
parentElement.appendChild(wrapperDiv);
}
}
}
function unwrapAndRemove(wrapperDiv, elementToUnwrap, parentElement) {
if (elementToUnwrap && elementToUnwrap.parentNode === parentElement) {
parentElement.removeChild(elementToUnwrap);
}
if (wrapperDiv && wrapperDiv.parentNode === parentElement) {
parentElement.removeChild(wrapperDiv);
}
}
function handleResize() {
if (window.matchMedia("screen and (max-width: 1023px)").matches) {
var topBar = document.querySelector('.rtds-top-bar');
var bottomBar = document.querySelector('.rtds-bottom-bar');
/* FOR HEADER WITH NAVIGATION IN TOP BAR */
if (topBar && topBar.contains(SiteMenuWrapper)) {
document.querySelector('.rtds-main-heading__container').append(SiteMenuWrapper);
}
/* FOR HEADER WITH NAVIGATION IN BOTTOM BAR */
if (bottomBar && bottomBar.contains(SiteMenuWrapper)) {
document.querySelector('.rtds-main-heading__container').append(SiteMenuWrapper);
}
// Verifica altri elementi e le azioni che devono essere fatte su di essi
if (headerLinkRight) {
wrapAndAppend('rtds-primary-navigation__module', headerLinkRight, mainMenuWrapper);
}
if (headerSecondaryNav) {
wrapAndAppend('rtds-primary-navigation__module', headerSecondaryNav, mainMenuWrapper);
}
if (headerMainActions) {
wrapAndAppend('rtds-primary-navigation__module', headerMainActions, mainMenuWrapper);
}
if (mobilePanelSecondLastEl) {
wrapAndAppend('rtds-primary-navigation__module', mobilePanelSecondLastEl, mainMenuWrapper);
}
if (headerSocialLinks) {
wrapAndAppend('rtds-primary-navigation__module', headerSocialLinks, mainMenuWrapper);
}
calculateSiteHeader(mainHeading);
} else if (window.matchMedia("screen and (min-width: 1024px)").matches) {
// Se la viewport è maggiore o uguale a 1024px
var emptyNavModules = document.querySelectorAll('.rtds-primary-navigation__module:not(.is-main):empty');
emptyNavModules.forEach(function (emptyNavModule) {
if (SiteMenuWrapper.classList.contains('is-top-nav-positioned')) {
var topBarContainer = document.querySelector('.rtds-top-bar__container');
if (topBarContainer) {
topBarContainer.prepend(SiteMenuWrapper);
}
}
if (SiteMenuWrapper.classList.contains('is-bottom-nav-positioned')) {
var bottomBarContainer = document.querySelector('.rtds-bottom-bar__container');
if (bottomBarContainer) {
bottomBarContainer.prepend(SiteMenuWrapper);
}
}
if (headerSecondaryNav) {
unwrapAndRemove(emptyNavModule, headerSecondaryNav, mainMenuWrapper);
}
if (headerMainActions) {
unwrapAndRemove(emptyNavModule, headerMainActions, mainMenuWrapper);
}
if (mobilePanelSecondLastEl) {
unwrapAndRemove(emptyNavModule, mobilePanelSecondLastEl, mainMenuWrapper);
}
if (headerSocialLinks) {
unwrapAndRemove(emptyNavModule, headerSocialLinks, mainMenuWrapper);
}
if (headerLinkRight) {
unwrapAndRemove(emptyNavModule, headerLinkRight, mainMenuWrapper);
}
});
// Riporto headerSocialLinks nel suo posto originale
if (headerSecondaryNav) {
var topBarContainer = document.querySelector('.rtds-top-bar__container');
if (topBarContainer) {
topBarContainer.prepend(headerSecondaryNav);
}
}
if (headerSocialLinks) {
var utilitiesArea = document.querySelector('.rtds-top-bar__utilities-area');
if (utilitiesArea) {
utilitiesArea.prepend(headerSocialLinks);
}
}
if (headerLinkRight) {
var utilitiesArea = document.querySelector('.rtds-top-bar__utilities-area');
if (utilitiesArea) {
utilitiesArea.prepend(headerLinkRight);
}
}
if (headerMainActions) {
document.querySelector('.rtds-main-heading__container').append(headerMainActions);
}
if (mobilePanelSecondLastEl) {
document.querySelector('#siteHeader').append(mobilePanelSecondLastEl);
}
calculateSiteHeader(siteHeader);
}
}
window.addEventListener('resize', handleResize);
handleResize(); // Initialize on page load
document.getElementById('mobileNavToggle').addEventListener('click', function (e) {
e.preventDefault();
openOffCanvasMenu(this, mainMenuWrapper);
// console.log('clicked');
});
document.addEventListener('keyup', function (e) {
// if (e.key === "Escape") {
// if (mainMenuWrapper.classList.contains('is-open')) {
// closeMobileMenu();
// if (window.getComputedStyle(document.getElementById('mobileNavToggle')).display !== 'none') {
// document.getElementById('mobileNavToggle').focus();
// }
// if (document.getElementById('mainMenuToggle')) {
// document.getElementById('mainMenuToggle').focus();
// }
// }
// }
if (e.key === "Escape") {
if (mainMenuWrapper.classList.contains('is-open')) {
// Verifica se il focus è all'interno del menu principale
const isFocusInsideMainMenu = SiteMenuWrapper.contains(document.activeElement) &&
!document.activeElement.closest('.rtds-dropdown-menu__item');
if (isFocusInsideMainMenu) {
closeMobileMenu();
// Se disponibile, ripristina il focus sull'elemento principale di apertura menu
if (document.getElementById('mobileNavToggle')) {
document.getElementById('mobileNavToggle').focus();
}
}
}
}
// if ((e.key === 'Tab' || e.keyCode === 9) && !mainMenuWrapper.contains(e.target)) {
// closeMobileMenu();
// }
});
document.body.addEventListener('click', function (e) {
if ((!SiteMenuWrapper.contains(e.target) || document.querySelector('.rtds-primary-navigation__backdrop').contains(e.target)) && mainMenuWrapper.classList.contains('is-open')) {
closeMobileMenu();
}
});
}
});
/* SEARCH DIALOG */
Componente principale per l’header del sito. Include una barra superiore, un’area di intestazione principale e una barra inferiore opzionale.
Il componente Header è progettato per gestire l’intera area di intestazione del sito con supporto completo per l’accessibilità e la responsività . Include:
Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:
<header>aria-label) per descrivere il suo scopohasShadow: Aggiunge un’ombra all’header (default: true)hasBottomBar: Abilita la barra inferiore (default: true)hasSecondaryNav: Abilita la navigazione secondariahasSearchButton: Abilita il pulsante di ricercahasTopBarSocial: Abilita i link social nella barra superioremobileHidden: Nasconde la barra superiore su mobilelogoDivider: Aggiunge un divisore dopo il logosecondLogo: Abilita un secondo logohasMobileSearch: Abilita la modale mobile di ricerca (gestita nel componente main-heading)Il componente include diverse varianti preconfigurate:
search-bar (variante with-search-bar) e modale mobile di ricercaIl componente header utilizza il componente main-heading che gestisce il dimensionamento del branding tramite custom properties CSS. Questo permette una personalizzazione flessibile delle dimensioni massime dell’area branding:
--branding-max-width: Larghezza massima dell’area branding per tablet (default: 22rem)--branding-max-width-xl: Larghezza massima dell’area branding per desktop XL (default: 25rem)--logo-secondary-width: Larghezza massima del logo secondario (default: auto)È possibile sovrascrivere queste dimensioni utilizzando parametri specifici del componente main-heading come brandingMaxWidth e brandingMaxWidthXl. Questo approccio permette di adattare le dimensioni del branding per specifiche esigenze di layout senza modificare i CSS globali.
Il componente include funzionalità JavaScript avanzate per la gestione del layout responsive e dell’interattività . Ecco una panoramica dettagliata:
Il componente gestisce il layout in modo dinamico in base alla dimensione della viewport:
Sotto i 1024px (Mobile/Tablet):
Sopra i 1024px (Desktop):
toggleIcon(): Gestisce lo stato visibile/nascosto delle iconeopenOffCanvasMenu(): Apre il menu mobile e gestisce gli stati ARIAcloseMobileMenu(): Chiude il menu mobile e ripristina gli statiwrapAndAppend(): Avvolge gli elementi in contenitori per il layout mobileunwrapAndRemove(): Rimuove i contenitori e ripristina gli elementi nella loro posizione originalehandleResize(): Gestisce la riorganizzazione degli elementi in base alla viewportcalculateSiteHeader(): Calcola e imposta l’altezza dell’header come variabile CSSDOMContentLoaded: Inizializzazione del componenteresize: Gestione del layout responsiveclick: Gestione dei toggle del menu mobilekeyup: Gestione della navigazione da tastiera (es. tasto ESC)--header-offset: Altezza calcolata dell’header per il posizionamento degli elementiLa modale desktop di ricerca è gestita dal componente @search-modal-desktop e viene inclusa nel componente top-bar quando hasSearchButton è abilitato. La logica JavaScript per la gestione della modale (apertura, chiusura, focus trap, ecc.) è contenuta nel file search-modal-desktop.js e non in header.js.
La modale desktop può essere configurata in due varianti:
@input-field--search e @button--icon-right@search-bar con autocomplete completoPer utilizzare la variante con search-bar, impostare searchModalVariant: 'with-search-bar' nel componente top-bar.
La modale mobile di ricerca è gestita dal componente @search-bar--mobile-modal e viene inclusa nel componente main-heading quando hasMobileSearch è abilitato. La logica JavaScript per la gestione della modale (apertura, chiusura, focus trap, ecc.) è contenuta nel file search-bar.js e non in header.js.