user-navigation

// src/components/template-components/header/user-navigation/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/header/user-navigation
additionalProperties: false
type: object
required:
  - profile
  - user
  - menu
properties:
  profile:
    description: elements/card-user-profile
    format: html
    type: string
  user:
    type: object
    additionalProperties: false
    required:
      - avatar
      - first_name
      - last_name
    properties:
      avatar:
        description: elements/image
        format: html
        type: string
      first_name:
        type: string
      last_name:
        type: string
  menu:
    description: template-components/header/user-navigation/menu
    format: html
    type: string

// src/components/template-components/header/user-navigation/mocks.yaml

profile:
  $ref: /elements/card-user-profile#minimal
  $tpl: /elements/card-user-profile
user:
  avatar:
    $ref: elements/image#avatar
    $tpl: elements/image
    alt: ''
  first_name: Tiziana
  last_name: Lagomarsino
menu:
  $ref: /template-components/header/user-navigation/menu
  $tpl: /template-components/header/user-navigation/menu

// src/components/template-components/header/user-navigation/user-navigation.twig

{{ attach_library('finstral_global/template-components-header-user-navigation') }}

{% set close_button_label_id = "close-button-" ~ random() ~ "-label" %}
{% set trigger_label = "user-profile-menu-trigger-" ~ random() ~ "-label" %}

<user-navigation class="UserNavigation">
	<div class="UserNavigation-container">
		<button
			aria-labelledby="{{ trigger_label }}"
			class="UserNavigation-trigger"
			id="user-navigation-trigger"
			type="button"
			aria-expanded="false"
			aria-controls="user-navigation"
		>
			<span class="UserNavigation-avatar">
				{{ user.avatar }}
			</span>
			<span class="UserNavigation-triggerUsername">
				<span class="u-typo-TextL" id="{{ trigger_label }}">{{ user.first_name }} {{ user.last_name }}</span>
				{% include "@elements/icon/icon.twig" with {
					name: "chevron_down",
					classes: ["UserNavigation-trigger--icon"]
				} only %}
			</span>
		</button>

		<div class="UserProfileMenuCard" id="user-navigation">
			<button aria-labelledby="{{ close_button_label_id }}" class="UserProfileMenuCard-close" id="user-profile-menu-close-button" type="button">
				<span id="{{ close_button_label_id }}" hidden>{{ "card_user_profile.close_button_label"|tc }}</span>
				{% include "@elements/icon/icon.twig" with {
					name: "close",
				} only %}
			</button>

			{{ profile }}

			{{ menu }}
		</div>
	</div>
	<div id="user-profile-menu-backdrop" class="UserNavigation-backdrop" hidden></div>
</user-navigation>