<a href="#" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--outlined">
Login
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--arrow-right-start-on-rectangle" />
</svg>
</a>
{% if isUserLoggedIn %}
<nav class="rtds-user-dropdown" aria-label="Utente" id="userDropdown">
<div class="rtds-dropdown-menu rtds-user-dropdown__menu has-dropdown-menu rtds-flex-1">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group{% if triggerLabelColor %} {{ triggerLabelColor }}{% endif %} hover:rtds-underline hover:rtds-content-primary aria-expanded:rtds-bg-white aria-expanded:rtds-content-primary aria-expanded:rtds-relative" aria-expanded="false" aria-controls="{{ userDropdownId }}">
Username Surname
{%- render '@icon--small', {id: 'mini--chevron-down',size: 'rtds-w-5 rtds-h-5', classes: 'rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180'},true -%}
</button>
<ul class="rtds-dropdown-menu__list rtds-user-dropdown__menu-list rtds-hidden rtds-border rtds-w-full lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute" id="{{ userDropdownId }}">
{% for i in range(1, 3) %}
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<div class="rtds-user-dropdown__menu-label rtds-items-center">
Item label 1
</div>
<ul class="rtds-user-dropdown__menu-sublist">
{% for i in range(1, 3) %}
<li class="rtds-user-dropdown__menu-label">
<a class="rtds-user-dropdown__menu-link" href="">
Item label 1
</a>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
<li class="rtds-dropdown-menu__item rtds-user-dropdown__menu-item">
<a class="rtds-user-dropdown__menu-logout rtds-user-dropdown__menu-link is-logout" href="#">
Esci
{%- render '@icon--small', {id: 'solid--arrow-right-start-on-rectangle',size: 'rtds-w-5 rtds-h-5', classes: 'rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180'},true -%}
</a>
</li>
</ul>
</div>
</nav>
{% else %}
{% render '@button--icon-right', {label:'Login', href: '#', icon: 'outline--arrow-right-start-on-rectangle', classes: 'rtds-btn--outlined'}, true %}
{% endif %}
{
"buttonClasses": "rtds-btn--only-text",
"userDropdownId": "userDropdown",
"dropdownMenu": {
"listItem": true,
"label": "Username Surname",
"id": "usermenu",
"classes": "rtds-primary-navigation__item",
"listClasses": "rtds-border-r-0 rtds-border-l-0 lg:rtds-border-r lg:rtds-border-l"
}
}
@layer components {
.rtds-user-dropdown {
@apply rtds-flex;
}
.rtds-user-dropdown__menu.has-dropdown-menu {
@apply lg:rtds-relative;
}
:where(.rtds-user-dropdown__menu) .rtds-dropdown-trigger {
@apply rtds-transition-all rtds-w-full rtds-flex rtds-p-3 rtds-gap-2 rtds-text-sm lg:rtds-text-base rtds-items-center rtds-font-medium hover:rtds-underline hover:rtds-content-primary hover:rtds-bg-white lg:rtds-rounded;
}
.rtds-user-dropdown__menu-label {
@apply rtds-p-3 rtds-bg-white;
}
.rtds-user-dropdown__menu-list {
@apply rtds-z-20 rtds-text-base lg:rtds-text-sm;
}
.rtds-user-dropdown__menu-sublist {
@apply rtds-pl-3 rtds-bg-white;
}
.rtds-user-dropdown__menu-link {
@apply hover:rtds-underline hover:rtds-content-primary;
}
.rtds-user-dropdown__menu-logout {
@apply rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-p-3 rtds-bg-white;
}
}
Componente utility NON DEFINITIVO per menu login utente. WIP.