Regione Toscana Design System — Servizi Design System Core

user-dropdown-servizi: Non loggato 

<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>
 
{% extends '@user-dropdown' %}

{% block triggerLabel %}{%- render '@icon--small', {id: 'mini--user', size: 'rtds-w-5 rtds-h-5'}, true -%}{{ userName | default('Username Surname') }}{% endblock %}

{% block loginElement %}<a href="{{ loginHref | default('#') }}" class="rtds-user-dropdown__login-trigger{% if classes %} {{ classes }}{% endif %}">
    {%- render '@icon--small', {id: 'mini--user', size: 'rtds-w-5 rtds-h-5'}, true -%}
    {{ loginLabel | default('Accedi') }}
</a>{% endblock %}
 
{
  "userDropdownId": "userDropdown",
  "userName": "Username Surname",
  "loginHref": "#",
  "loginLabel": "Accedi"
}

User Dropdown Servizi

Componente per il menu utente nei template-servizi. Gestisce due stati: utente non autenticato (ghost link “Accedi” con icona utente) e utente autenticato (trigger dropdown con icona utente e nome).

Differisce da @user-dropdown (core) in due punti:

  • Non loggato: ghost link <a> con icona, non bottone outlined
  • Loggato: trigger con icona utente visibile a sinistra del nome

Comportamento

  • isUserLoggedIn: false (default) — <a> ghost link con icona mini--user e testo “Accedi”
  • isUserLoggedIn: true — <nav aria-label="Utente"> con trigger <button> che mostra icona utente, nome e chevron-down; apre un dropdown con voci di navigazione e link “Esci”

Varianti

Variante Descrizione
Non loggato (default) Ghost link [ user ] Accedi
Utente loggato Trigger dropdown [ user ] Nome Cognome [ chevron ]

Parametri di configurazione

Parametro Tipo Obbligatorio Descrizione
isUserLoggedIn booleano No Se true renderizza il menu dropdown. Default: false
userName stringa No Nome nel trigger loggato. Default: "Username Surname"
loginHref stringa No Href del ghost link. Default: "#"
loginLabel stringa No Testo del ghost link. Default: "Accedi"
userDropdownId stringa No ID della <ul> dropdown e target di aria-controls. Default: "userDropdown"
classes stringa No Classi CSS aggiuntive sulla radice (<nav> se loggato, <a> se non loggato)
listClasses stringa No Classi CSS aggiuntive sulla <ul> dropdown (solo stato loggato)
triggerLabelColor stringa No Classe colore testo trigger loggato

Accessibilità

  • Non loggato — <a> con testo visibile “Accedi”; l’icona è decorativa (aria-hidden gestito da @icon--small)
  • Loggato — <nav aria-label="Utente"> landmark; trigger <button> con aria-expanded / aria-controls; lista <ul> con <li> e <a>

Stili CSS

Usa le classi BEM definite in 03-molecules/user-dropdown/user-dropdown.css — nessun file CSS separato.

Classe Elemento Descrizione
.rtds-user-dropdown radice <nav> contenitore stato loggato
.rtds-user-dropdown__login-trigger <a> ghost link stato non loggato
.rtds-user-dropdown__menu-list <ul> lista voci dropdown
.rtds-user-dropdown__menu-logout <a> link “Esci”

Esempi di utilizzo

<!-- Stato non autenticato -->
<a href="/accedi" class="rtds-user-dropdown__login-trigger">
  <!-- icona mini--user (iniettata da @icon--small) -->
  Accedi
</a>

<!-- Stato autenticato -->
<nav aria-label="Utente" class="rtds-user-dropdown">
  <div class="rtds-dropdown-menu rtds-user-dropdown__menu has-dropdown-menu">
    <button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger"
            aria-expanded="false"
            aria-controls="userDropdown">
      <!-- icona mini--user -->
      Mario Rossi
      <!-- icona mini--chevron-down -->
    </button>
    <ul id="userDropdown" class="rtds-dropdown-menu__list rtds-user-dropdown__menu-list rtds-hidden">
      <li class="rtds-user-dropdown__menu-item">...</li>
      <li class="rtds-user-dropdown__menu-item">
        <a class="rtds-user-dropdown__menu-logout rtds-user-dropdown__menu-link" href="#">
          Esci
        </a>
      </li>
    </ul>
  </div>
</nav>

Note

  • Usato da @top-bar-servizi (desktop) e @main-heading--logo-square--servizio (mobile)
  • Estende @user-dropdown (Core) tramite extends Nunjucks — struttura ereditata automaticamente, override solo su triggerLabel e loginElement; vedi l’elenco componenti Core in docs/servizi/05-componenti-core.md per il quadro completo delle dipendenze Core→Servizi
  • Limitazione nota: <nav id="userDropdown"> hardcoded — due istanze in DOM (desktop + mobile loggato) producono ID duplicato