Regione Toscana Design System

Complete header component: Regione Section 

<header class="rtds-header rtds-shadow-md" id="siteHeader" aria-label="Header del sito">

    <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>

                <div class="rtds-flex rtds-gap-4 rtds-items-center">

                    <a href="#" class="rtds-link">
                        <img src="/images/toscana-notizie.png" alt="Toscana Notizie" width="147" height="28" srcset="/images/toscana-notizie.png 1x, /images/toscana-notizie@2x.png 2x">
                    </a>

                </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>

                                <form role="search" class="rtds-flex rtds-gap-2">
                                    <div class="rtds-input-field rtds-gap-1 rtds-flex-1 rtds-search-modal-desktop__input ">
                                        <label for="inputSearch" class="rtds-input-field__label">
                                            Cerca servizi, informazioni, aiuti...

                                        </label>

                                        <div class="rtds-input has-icon">

                                            <svg class="rtds-icon rtds-fill-current rtds-input__icon" aria-hidden="true" focusable="false" role="img">
                                                <use href="../../icons.svg#mini--magnifying-glass" />
                                            </svg>

                                            <input id="inputSearch" class="rtds-text-sm rtds-input-placeholder" type="search" placeholder="Cerca">
                                        </div>

                                    </div>
                                    <button type="button" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--primary rtds-self-end">

                                        Cerca nel sito

                                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-right" />
                                        </svg>

                                    </button>

                                </form>

                            </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 rtds-gap-4">
                <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-rt.png" alt="Alt logo image" width="326" height="95" />
                </a>

                <div class="rtds-site-branding__secondary">
                    <div class="rtds-site-logo rtds-logo-tema rtds-logo--secondary rtds-w-auto">
                        <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="/images/icona-tema-sociale.svg" alt="Alt logo image" width="118" height="24" />
                    </div>

                    <span class="rtds-site-branding__secondary-text">
                        <span class="rtds-grid rtds-content-02">
                            <span class="rtds-text-xs rtds-font-bold rtds-uppercase">Temi e servizi</span>
                            <span class="rtds-heading-2 rtds-leading-none">Sociale</span>
                        </span>
                    </span>

                </div>

            </div>

            <div class="rtds-main-headings__center rtds-flex-1 lg:rtds-ml-auto lg:rtds-justify-end">
                <nav class="rtds-primary-navigation
   lg:rtds-justify-end rtds-primary-navigation--megamenu has-megamenu
" 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">
                                        Temi e servizi
                                    </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">
                                        Bandi e opportunità
                                    </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">
                                        Regione
                                    </a>
                                </li>

                                <li class="rtds-dropdown-menu has-dropdown-menu rtds-primary-navigation__item has-megamenu">
                                    <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center  aria-expanded:rtds-sticky aria-expanded:rtds-z-30 aria-expanded:rtds-top-0 aria-expanded:rtds-bg-white aria-expanded:rtds-content-primary aria-expanded:rtds-border-b-4 aria-expanded:rtds-border-gray-02 lg:aria-expanded:rtds-border-b-0 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-01">

                                        Dropdown item

                                        <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-hidden 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-right" />
                                        </svg>
                                        <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-hidden lg:rtds-inline-flex 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>

                                    <div class="rtds-dropdown-menu__megamenu lg:rtds-top-[--header-offset]  rtds-w-full lg:rtds-absolute lg:rtds-shadow-md lg:rtds-p-8" id="submenumenu-01">
                                        <ul class="rtds-dropdown-menu__list lg:rtds-container">

                                            <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" 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" 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" 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" 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" 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" 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" 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" 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" 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" href="">
                                                    <div class="rtds-flex rtds-gap-2 rtds-items-center">

                                                        <span class="rtds-grow">List item</span>

                                                    </div>

                                                </a>
                                            </li>

                                        </ul>
                                    </div>

                                </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>

</header>
 
{% extends '@header--regione' %}
<!-- Top bar -->
{% block topBar %}
    {{ super() }}
{% endblock topBar %}

{% block mainHeading %}
<!-- Main heading -->
{% render '@main-heading--has-megamenu',{
    logoDivider: 'false',
    verticalDividerClasses: 'rtds-hidden md:rtds-block',
    logoPath: '/images/logo-rt.png',
    secondLogoPath: '/images/icona-tema-sociale.svg',
    secondLogoWidth: '118',
    secondLogoHeight: '24',
    secondLogo: 'true',
    secondLogoClasses: 'rtds-logo-tema',
    brandingGap: 'rtds-gap-4',
    secondaryLogoText: '<span class="rtds-grid rtds-content-02">
        <span class="rtds-text-xs rtds-font-bold rtds-uppercase">Temi e servizi</span>
        <span class="rtds-heading-2 rtds-leading-none">Sociale</span>
    </span>'
}, true %}
{% endblock mainHeading %}

{% block bottomBar %}
    {% if hasBottomBar %}
        {% render '@bottom-bar' %}
    {% endif %}
{% endblock bottomBar %}
 
{
  "hasShadow": true,
  "hasBottomBar": false
}
  • Content: 
    /**
 * 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;
    }
}
  • URL: /components/raw/header/header.css
  • Filesystem Path: components/04-organisms/header/header.css
  • Size: 271 Bytes
  • Content: 
    /* 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 */
  • URL: /components/raw/header/header.js
  • Filesystem Path: components/04-organisms/header/header.js
  • Size: 12 KB

Componente Header

Componente principale per l’header del sito. Include una barra superiore, un’area di intestazione principale e una barra inferiore opzionale.

Comportamento e Funzionalità

Il componente Header è progettato per gestire l’intera area di intestazione del sito con supporto completo per l’accessibilità e la responsività. Include:

  • Gestione della barra superiore con navigazione secondaria
  • Area di intestazione principale con logo e azioni
  • Barra inferiore opzionale
  • Gestione responsive del menu mobile
  • Supporto per ombreggiature e stili personalizzabili

Accessibilità

Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:

Struttura e Semantica

  • L’header è implementato con il tag semantico <header>
  • Include un’etichetta ARIA (aria-label) per descrivere il suo scopo
  • Gestione corretta degli stati espansi/collassati per i menu mobili
  • Supporto per la navigazione da tastiera

Interattività

  • Gestione degli stati attivi/inattivi per i menu mobile
  • Supporto per la chiusura automatica dei menu quando si clicca fuori
  • Gestione corretta del focus per i menu a tendina

Configurazioni per lo Sviluppo in Nunjucks

Parametri Disponibili

Struttura Base

  • hasShadow: Aggiunge un’ombra all’header (default: true)
  • hasBottomBar: Abilita la barra inferiore (default: true)

Top Bar

  • hasSecondaryNav: Abilita la navigazione secondaria
  • hasSearchButton: Abilita il pulsante di ricerca
  • hasTopBarSocial: Abilita i link social nella barra superiore
  • mobileHidden: Nasconde la barra superiore su mobile

Main Heading

  • logoDivider: Aggiunge un divisore dopo il logo
  • secondLogo: Abilita un secondo logo
  • hasMobileSearch: Abilita la modale mobile di ricerca (gestita nel componente main-heading)

Varianti

Il componente include diverse varianti preconfigurate:

  1. Default: Header completo con tutte le funzionalità
  2. has-actions: Header con azioni aggiuntive
  3. has-search-v2: Header con modale desktop di ricerca che utilizza il componente search-bar (variante with-search-bar) e modale mobile di ricerca
  4. regione: Header specifico per la regione, senza barra inferiore
  5. regione-section: Header per sezioni regionali, senza barra inferiore
  6. regione-2-logos: Header per la regione con due loghi (principale e secondario)
  7. logo-square: Header con logo quadrato e dimensionamento personalizzato del branding

Gestione del Dimensionamento del Branding

Il 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:

Custom Properties Disponibili

  • --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)

Personalizzazione tramite Style Inline

È 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.

JavaScript e Gestione Responsive

Il componente include funzionalità JavaScript avanzate per la gestione del layout responsive e dell’interattività. Ecco una panoramica dettagliata:

Gestione del Layout Responsive

Il componente gestisce il layout in modo dinamico in base alla dimensione della viewport:

Breakpoint Principale (1024px)

  • Sotto i 1024px (Mobile/Tablet):

    • Il menu principale viene spostato nel contenitore dell’header
    • Gli elementi della barra superiore vengono riorganizzati in moduli di navigazione
    • Viene attivato il menu mobile con gestione del toggle
    • Gli elementi vengono avvolti in contenitori specifici per il layout mobile

  • Sopra i 1024px (Desktop):

    • Il menu principale viene riposizionato nella sua posizione originale
    • Gli elementi della barra superiore vengono ripristinati nelle loro posizioni originali
    • I moduli di navigazione mobile vengono rimossi
    • Gli elementi social e di utilità vengono riposizionati nelle loro aree dedicate

Funzionalità Principali

Gestione del Menu Mobile

  • toggleIcon(): Gestisce lo stato visibile/nascosto delle icone
  • openOffCanvasMenu(): Apre il menu mobile e gestisce gli stati ARIA
  • closeMobileMenu(): Chiude il menu mobile e ripristina gli stati

Gestione del Layout

  • wrapAndAppend(): Avvolge gli elementi in contenitori per il layout mobile
  • unwrapAndRemove(): Rimuove i contenitori e ripristina gli elementi nella loro posizione originale
  • handleResize(): Gestisce la riorganizzazione degli elementi in base alla viewport

Calcolo delle Dimensioni

  • calculateSiteHeader(): Calcola e imposta l’altezza dell’header come variabile CSS
  • Gestione dinamica delle altezze per il corretto posizionamento degli elementi

Gestione degli Stati e Accessibilità

  • Gestione degli attributi ARIA per gli stati espansi/collassati
  • Supporto per la navigazione da tastiera
  • Gestione del focus durante l’apertura/chiusura dei menu
  • Supporto per la chiusura automatica dei menu quando si clicca fuori

Eventi Gestiti

  • DOMContentLoaded: Inizializzazione del componente
  • resize: Gestione del layout responsive
  • click: Gestione dei toggle del menu mobile
  • keyup: Gestione della navigazione da tastiera (es. tasto ESC)

Variabili CSS Dinamiche

  • --header-offset: Altezza calcolata dell’header per il posizionamento degli elementi
  • Gestione delle classi per gli stati attivi/inattivi
  • Supporto per le transizioni e le animazioni

Gestione Modale Desktop di Ricerca

La 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:

  • Default: Utilizza un form con @input-field--search e @button--icon-right
  • with-search-bar: Utilizza il componente @search-bar con autocomplete completo

Per utilizzare la variante con search-bar, impostare searchModalVariant: 'with-search-bar' nel componente top-bar.

Nota sulla Modale Mobile di Ricerca

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.