Regione Toscana Design System — Servizi Design System Core

Top Bar Servizi 

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

            <a href="#" class="rtds-user-dropdown__login-trigger"><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>
                Accedi
            </a>

        </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": false,
    "loginHref": "#",
    "loginLabel": "Accedi",
    "userDropdownId": "userDropdown"
  }
}

Top Bar Servizi

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.

Comportamento

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.

Varianti

Variante Descrizione
Utente non loggato (default) Ghost link “Accedi” con icona utente
Utente loggato Menu dropdown con icona utente e nome

Parametri di configurazione

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'

Stili CSS

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

Note

  • Desktop-only per default (mobileHidden: true); il comportamento è controllato dal param, non hardcoded nel markup
  • Estende @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
  • Dipende da @user-dropdown-servizi, non da @user-dropdown core
  • Usato da @header-servizio in sostituzione di @top-bar