<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>
<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 -->
<div class="rtds-top-bar{% if classes %} {{ classes }}{% endif %}{% if bgColor %} {{ bgColor }}{% endif %}{% if spacing %} {{ spacing }}{% endif %}{% if mobileHidden %} rtds-hidden lg:rtds-flex{% endif %}">
<div class="rtds-top-bar__container rtds-container">
{% block leftArea %}
<div class="rtds-top-bar__navigation rtds-grid lg:rtds-flex rtds-items-center rtds-gap-2 lg:rtds-gap-8">
{% block TopBarLinkLeft %}
{# {% if hasTopBarLinkLeft === 'true' %} #}
{% if topBarLinkLeft.length > 0 %}
<div class="rtds-flex rtds-gap-4 rtds-items-center">
{% for item in topBarLinkLeft %}
<a href="{% if item.link %}{{ item.link }}{% else %}#{% endif %}" class="rtds-link">
<img src="{{ item.image }}" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}" {% if item.imageSrcset %}srcset="{{ item.imageSrcset }}"{% endif %}>
</a>
{% endfor %}
</div>
{% endif %}
{% endblock TopBarLinkLeft %}
{% block secondaryNav %}
{% if hasSecondaryNav %}
<!-- Secondary nav/menu component -->
{% render '@secondary-navigation', {label: 'Secondaria', items: [{label : 'Uffici'},{label : 'URP'},{label : 'PEC'},{label : 'Mappa del sito'},{label : 'Amministrazione trasparente'},{label : 'Intranet'}]}, true %}
{% endif %}
{% endblock secondaryNav %}
</div>
{% endblock leftArea %}
{% block rightArea %}
<div class="rtds-top-bar__utilities-area rtds-flex lg:rtds-gap-4 xl:rtds-gap-6 rtds-ml-auto">
{% if hasTopBarSocial %}
<!-- Social links component -->
{% render '@social-links', {id: 'headerSocial',listGap: 'rtds-gap-4 lg:rtds-gap-2 xl:rtds-gap-4 rtds-flex-wrap', classes: 'rtds-p-2 lg:rtds-p-0',linkIconSize: 'rtds-w-8 rtds-h-8 lg:rtds-w-5 lg:rtds-h-5 xl:rtds-w-6 xl:rtds-h-6',
items: [{label : 'Vai al profilo Facebook di Regione Toscana',
icon: 'solid--facebook',
classes : 'rtds-flex rtds-items-center'},
{label : 'Vai al profilo X di Regione Toscana',
icon: 'solid--x',
classes : 'rtds-flex rtds-items-center'},
{label : 'Vai al canale Telegram di Regione Toscana',
icon: 'solid--telegram',
classes : 'rtds-flex rtds-items-center'},
{label : 'Vai al canale Youtube di Regione Toscana',
icon: 'solid--youtube',
classes : 'rtds-flex rtds-items-center'},
{label : 'Vai al canale Instagram di Regione Toscana',
icon: 'solid--instagram',
classes : 'rtds-flex rtds-items-center'},
{label : 'Vai al profilo Flickr di Regione Toscana',
icon: 'solid--flickr',
classes : 'rtds-flex rtds-items-center'}]}, true %}
{% endif %}
{% block userDropdown %}
{% if hasUserDropdown %}
{% render '@user-dropdown', userDropdown , true %}
{% endif %}
{% endblock userDropdown %}
{% if hasVerticalDivider %}
{% render '@vertical-divider', { width: 'rtds-w-1e', classes: 'rtds-flex' }, true %}
{% endif %}
{% block TopBarLinkRight %}
{# {% if hasTopBarLinkRight === 'true' %} #}
{% if topBarLinkRight.length > 0 %}
<div class="rtds-flex rtds-gap-4 rtds-items-center">
{% for item in topBarLinkRight %}
<a href="{% if item.link %}{{ item.link }}{% else %}#{% endif %}" class="rtds-link">
<img src="{{ item.image }}" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}" {% if item.imageSrcset %}srcset="{{ item.imageSrcset }}"{% endif %}>
</a>
{% endfor %}
</div>
{% endif %}
{% endblock TopBarLinkRight %}
{% if hasLanguageSelector %}
<!-- Language Selctor component -->
<div class="rtds-px-4">Lingua</div>
{% endif %}
{% if hasSearchButton %}
<!-- Search Modal Desktop -->
{% if searchModalVariant == 'with-search-bar' %}
{% render '@search-modal-desktop--with-search-bar', {
modalId: 'searchModal',
modalTitleId: 'modalTitle',
modalTitle: 'Cerca nel sito',
triggerId: 'searchModalTrigger',
triggerLabel: 'Cerca nel sito - apri la modale',
closeButtonId: 'closeModal',
closeButtonLabel: 'Chiudi',
searchId: searchId|default('desktopSearchBar'),
label: searchLabel|default('Cerca'),
submitLabel: searchSubmitLabel|default('Cerca'),
showClearButton: showClearButton|default(true),
placeholder: searchPlaceholder|default('Search'),
formAction: searchFormAction|default('/search'),
formMethod: searchFormMethod|default('get'),
allResultsHref: allResultsHref|default('/search?q='),
allResultsLabel: allResultsLabel|default('Tutti i risultati'),
searchOptions: searchOptions,
searchBarClasses: searchBarClasses,
searchButtonBorderColor: searchButtonBorderColor,
searchButtonTextColor: searchButtonTextColor
}, true %}
{% else %}
{% render '@search-modal-desktop', {
modalId: 'searchModal',
modalTitleId: 'modalTitle',
modalTitle: 'Cerca nel sito',
triggerId: 'searchModalTrigger',
triggerLabel: 'Cerca nel sito - apri la modale',
closeButtonId: 'closeModal',
closeButtonLabel: 'Chiudi',
inputLabel: 'Cerca servizi, informazioni, aiuti...',
inputId: 'inputSearch',
inputPlaceholder: 'Cerca',
submitLabel: 'Cerca nel sito',
searchButtonBorderColor: searchButtonBorderColor,
searchButtonTextColor: searchButtonTextColor
}, true %}
{% endif %}
{% endif %}
</div>
<!--/ END TOP BAR UTILITIES -->
{% endblock rightArea %}
</div>
</div><!-- /END TOPBAR -->
{
"hasSecondaryNav": true,
"hasTopBarSocial": true,
"hasSearchButton": true,
"mobileHidden": true,
"spacing": "rtds-py-1 md:rtds-py-2 rtds-px-4",
"hasVerticalDivider": true,
"searchButtonBorderColor": "rtds-border-gray-03",
"searchModalVariant": null
}
/**
* SIDE NAVIGATION
*
*/
@layer components {
.rtds-top-bar {
@apply rtds-flex rtds-items-center rtds-background-01;
}
.rtds-top-bar__container {
@apply rtds-flex rtds-items-center lg:rtds-flex-1;
}
/*.rtds-top-bar__navigation {
}*/
/*.rtds-top-bar__utilities-area {
@apply rtds-flex rtds-ml-auto;
}*/
}
Top bar component
Configurations:
null o non specificato: usa la variante default con form semplice (@input-field--search + @button--icon-right)"with-search-bar": usa la variante con componente @search-bar completo con autocompleteQuando hasSearchButton è abilitato, il trigger button per la modale di ricerca include:
aria-haspopup="dialog": Indica che il bottone apre una modalearia-controls="searchModal": Riferimento all’ID della modale controllataaria-expanded: Attributo gestito dinamicamente da JavaScript:aria-expanded="false" quando la modale è chiusa (valore iniziale)aria-expanded="true" quando la modale è apertaLa gestione JavaScript dell’attributo aria-expanded è implementata nel componente search-modal-desktop.js.
Quando hasSearchButton è abilitato, è possibile scegliere tra due varianti della modale desktop:
Utilizza un form semplice con:
@input-field--search per il campo di ricerca@button--icon-right per il bottone submitUtilizza il componente @search-bar completo con:
Esempio con variante search-bar:
Utilizzare @top-bar con i parametri: hasSearchButton: true, searchModalVariant: 'with-search-bar', searchId: 'desktopSearchBar', searchLabel: 'Cerca servizi, informazioni, aiuti...', placeholder: 'Search', allResultsHref: '/search?q=', allResultsLabel: 'Tutti i risultati'.
Blocks: