<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__utilities-area rtds-flex rtds-ml-auto">
<nav class="rtds-user-dropdown" aria-label="Utente" id="userDropdown">
<div class="rtds-dropdown-menu rtds-user-dropdown__menu has-dropdown-menu rtds-flex-1">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group hover:rtds-underline hover:rtds-content-primary aria-expanded:rtds-bg-white aria-expanded:rtds-content-primary aria-expanded:rtds-relative" aria-expanded="false" aria-controls="userDropdown">
<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--user" />
</svg>
Mario Rossi<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-user-dropdown__menu-list rtds-hidden rtds-border rtds-w-full lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute" id="userDropdown">
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<div class="rtds-user-dropdown__menu-label rtds-items-center">
Item label 1
</div>
<ul class="rtds-user-dropdown__menu-sublist">
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
</ul>
</li>
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<div class="rtds-user-dropdown__menu-label rtds-items-center">
Item label 1
</div>
<ul class="rtds-user-dropdown__menu-sublist">
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
</ul>
</li>
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<a class="rtds-user-dropdown__menu-logout rtds-user-dropdown__menu-link is-logout" href="#">
Esci<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#solid--arrow-right-start-on-rectangle" />
</svg>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div><!-- /END TOPBAR -->
{% extends '@top-bar' %}
{% block leftArea %}{% endblock %}
{% block rightArea %}
<div class="rtds-top-bar__utilities-area rtds-flex rtds-ml-auto">
{% if hasUserDropdown %}
{% render '@user-dropdown-servizi', userDropdown, true %}
{% endif %}
</div>
{% endblock %}
{
"mobileHidden": true,
"spacing": "rtds-py-1 md:rtds-py-2 rtds-px-4",
"hasUserDropdown": true,
"userDropdown": {
"isUserLoggedIn": true,
"loginHref": "#",
"loginLabel": "Accedi",
"userDropdownId": "userDropdown",
"userName": "Mario Rossi"
}
}
Top-bar desktop-only per i template-servizi. Mostra solo l’area utente (@user-dropdown-servizi). Estende @top-bar tramite ereditarietà Nunjucks — il wrapper esterno e la logica mobileHidden/spacing sono ereditati dal core; leftArea è svuotato, rightArea sostituito con solo @user-dropdown-servizi.
Renderizza un <div> nascosto su mobile e visibile da lg in su (comportamento controllato dal param mobileHidden: true ereditato dal core) con l’area utente allineata a destra. Nessun social, search, secondary-nav.
| Variante | Descrizione |
|---|---|
| Utente non loggato (default) | Ghost link “Accedi” con icona utente |
| Utente loggato | Menu dropdown con icona utente e nome |
| Parametro | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
hasUserDropdown |
booleano | No | Mostra l’area utente. Default: true |
userDropdown |
oggetto | No | Context per @user-dropdown-servizi |
mobileHidden |
booleano | No | Nasconde la top-bar su mobile (rtds-hidden lg:rtds-flex). Default: true |
spacing |
stringa | No | Classi padding. Default: 'rtds-py-1 md:rtds-py-2 rtds-px-4' |
Usa le classi BEM definite in 04-organisms/top-bar/top-bar.css — nessun file CSS separato.
| Classe | Elemento | Descrizione |
|---|---|---|
.rtds-top-bar |
radice <div> |
contenitore top-bar |
.rtds-top-bar__container |
<div> interno |
wrapper con .rtds-container |
.rtds-top-bar__utilities-area |
<div> |
area utility allineata a destra |
mobileHidden: true); il comportamento è controllato dal param, non hardcoded nel markup@top-bar (Core) tramite extends Nunjucks — wrapper esterno e logica mobileHidden/spacing ereditati automaticamente; vedi l’elenco componenti Core in docs/servizi/05-componenti-core.md per il quadro completo delle dipendenze Core→Servizi@user-dropdown-servizi, non da @user-dropdown core@header-servizio in sostituzione di @top-bar