menu

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

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/user-profile-menu/card
additionalProperties: false
type: object
required:
  - items
properties:
  items:
    type: array
    items:
      $ref: /elements/link

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

items:
  - label: Change profile data
    url: /edit-profile
    icon_name: user
  - label: User administration
    url: /admin
    icon_name: admin
  - label: My tickets
    url: /support/tickets
    icon_name: notes
  - label: Handbook Cloud
    url: https://handbook.finstral.com
    icon_name: handbook

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

{% set nav_accessible_name_id = "user-navigation-" ~ random() %}

<nav aria-labelledby="{{ nav_accessible_name_id }}" class="UserNavigationMenu">
	<span id="{{ nav_accessible_name_id }}" hidden>{{ "user_navigation.menu.nav_accessible_name"|t }}</span>
	<ul class="UserNavigationMenu-nav" id="user-navigation-nav">
			{% for item in items %}
					<li class="UserNavigationMenu-item">
						{% include "@elements/link/link.twig" with item|merge({
							classes: ["UserNavigationMenu-link"],
							icon: true,
							icon_position: "start"
						}) only %}
					</li>
			{% endfor %}
			<li class="UserNavigationMenu-item">
				{% include "@elements/button/button.twig" with {
					classes: ["UserNavigationMenu-logout"],
					label: "user_navigation.menu.logout_label"|t,
					modifiers: ["large", "secondary"],
					url: "/user/logout"
				} only %}
			</li>
	</ul>
</nav>