Dropdown Menu

<li class="n7-dropdown-menu{% if classes %} {{ classes }}{% endif %}">
    <button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="{{ id }}">
        {{ label }} {%- render '@icon--small', {id: 'mini--chevron-down',size: 'w-5 h-5', classes: 'transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180'},true -%}
    </button>
    <ul class="n7-dropdown-menu__list hidden lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80{% if listClasses %} {{ listClasses }} {% endif %}" id="{{ id }}">
        {% for item in items %}
        <li class="n7-dropdown-menu__item group{% if item.isActive %} is-active{% endif %}">
<!-- RP 240416 Minisite user menu - changed classes -->
            <a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b{% if item.classes %} {{ item.classes }}{% endif %}" href="#">
                <div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
                    {% if item.iconLeft %}
                        {% render '@icon--small', { id: item.iconLeft, classes: 'mr-2', size: 'w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6' }, true %}
                    {% endif %}
                    <span class="grow">{% if item.label %}{{ item.label }}{% else %} Item {% endif %}</span>
                    {% if item.iconRight %}
                        {% render '@icon--small', { id: item.iconRight, classes: 'ml-2', size: 'w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6' }, true %}
                    {% endif %}
                </div>
                {% if item.description %}<div class="text-xs n7-content-03">{{ item.description }}</div>{% endif %}
            </a>
        </li>
        {% endfor %}
    </ul>
</li>