Benutzer-Menü

{% set id = id ??? html_id('user-menu') -%}

{% embed '@overlay' with {
  id: id,
  open: open ?? false,
  closeUrl: closeUrl ?? false,
  label: 'User Menu' | t('site'),
  slim: true,
  destroyAfterClose: false,
  attrs: {
    'data-overlay': 'user-menu',
    'data-menu-tracking-category': 'user-menu',
  },
} %}
  {% macro menu(menuId, menu, level = 1, visible = false, parentItem = null) %}
    <div {{ html_attributes({
      class: 'user-menu__menu',
      id: menuId,
      'aria-hidden': visible ? 'false' : 'true',
    }) }}>
      {% if level > 1 %}
        <div class="user-menu__menu-headline">
          {% if menu.icon|default %}
            {% include '@icon' with {
              icon: menu.icon,
              class: 'user-menu__menu-headline-icon',
            } only %}
          {% endif %}

          {% include '@headline' with {
            text: menu.text,
            size: 4,
            tag: 'span',
          } %}
        </div>
      {% endif %}

      {% if menu.user|default %}
        <div class="user-menu__menu-user">
          {% if menu.user.image|default %}
            <img {{ html_attributes({
              class: 'user-menu__menu-user-image',
              src: menu.user.image,
              width: 100,
              height: 100,
              alt: '',
              role: 'presentation',
            }) }}>
          {% else %}
            {% include '@icon' with {
              icon: 'profile-image',
              class: 'user-menu__menu-user-icon',
            } only %}
          {% endif %}

          <div class="user-menu__menu-user-headline">
            {% include '@headline' with {
              text: menu.user.headline,
              size: 3,
              tag: 'div',
            } only %}
          </div>

          {% if menu.user.status|default %}
            <div class="user-menu__menu-user-status">
              {{- menu.user.status -}}
            </div>
          {% endif %}

          {% if menu.user.alert|default %}
            <div class="user-menu__menu-user-alert">
              {% include '@icon-with-text' with {
                icon: 'info-alt',
              } | merge(menu.user.alert) only %}
            </div>
          {% endif %}
        </div>
      {% endif %}

      {% if menu.items|default and menu.items|length > 0 %}
        <ul class="user-menu__menu-items" role="list">
          {% for item in menu.items %}
            {% set hasSubMenu = (item.items is defined and item.items|length > 0) or item.content is defined %}
            {% set subMenuId = "submenu-#{loop.index}" | namespaceInputId(menuId) %}
            {% set label = parentItem ? "#{parentItem}:#{item.text}" : item.text %}

            <li class="user-menu__menu-item">
              <div class="user-menu__link">
                {% include '@icon-button' with {
                  link: item.link ?? false,
                  text: item.text,
                  icon: item.icon ??? 'arrow-right',
                  count: item.count ?? false,
                  target: item.target ?? null,
                  attrs: hasSubMenu ? {
                    'aria-haspopup': 'true',
                    'aria-expanded': 'false',
                    'aria-controls': subMenuId,
                    'data-navigation-link': { level: level, label: label, position: loop.index },
                  } : {
                    'data-navigation-link': { level: level, label: label, position: loop.index },
                  },
                } only %}
              </div>

              {% if hasSubMenu %}
                {{ _self.menu(subMenuId, item, level + 1, false, label) }}
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}

      {% if menu.content|default %}
        <div class="user-menu__menu-content">
          {% include menu.content.use with menu.content.configuration | merge({
            id: 'content' | namespaceInputId(menuId),
          }) only %}
        </div>
      {% endif %}

      {% if menu.login|default %}
        <div class="user-menu__menu-login">
          <div class="user-menu__menu-login-button">
            {% include '@button' with menu.login only %}
          </div>

          {% if menu.loginText|default %}
            <div class="user-menu__menu-login-text">
              {{- menu.loginText | componentize -}}
            </div>
          {% endif %}
        </div>
      {% endif %}

      {% if menu.logoutForm|default %}
        <form {{ html_attributes({
          class: 'user-menu__menu-logout',
          action: menu.logoutForm.action ??? '',
          method: menu.logoutForm.method ??? 'post',
          enctype: 'multipart/form-data',
          'accept-charset': 'utf-8',
        }, menu.logoutForm.attrs ?? {}) }}>
          {{ menu.logoutForm.csrf|default ? csrfInput({ autocomplete: 'false' }) }}
          {{ menu.logoutForm.actionUrl|default ? actionInput(menu.logoutForm.actionUrl) }}
          {{ menu.logoutForm.redirectUrl|default ? redirectInput(menu.logoutForm.redirectUrl) }}

          {% for name, value in menu.logoutForm.hiddenInputs|default %}
            {{ value ? hiddenInput(name, value) }}
          {% endfor %}

          {% include '@button' with menu.logoutForm.button | merge({
            type: 'submit',
          }) only %}
        </form>
      {% endif %}

      {% if level > 1 %}
        <div class="user-menu__menu-back">
          {% include '@icon-button' with {
            icon: 'arrow-left',
            text: 'Back' | t('site'),
            attrs: {
              'data-overlay-close': 'user-menu',
            },
          } only %}
        </div>
      {% endif %}
    </div>
  {% endmacro %}

  {% block content %}
    <div class="user-menu">
      {{ _self.menu('menu' | namespaceInputId(id), menus[0] ?? menu, 1, true) }}
    </div>
  {% endblock %}
{% endembed %}