<ng-template #menuBtn let-element>
    <a
            class="flex w-full gap-5 items-center justify-center p-2 rounded-xl hover:bg hover:cursor-pointer"
            (click)="element.command ? element.command() : null"
            [routerLink]="element.routerLink">
        <div class=""><span [class]="element.icon"></span></div>
        <div class="flex flex-1 font-bold justify-start">
            {{ element.label | translate }}
        </div>
        <div *ngIf="(element.items ?? []).length > 0" class="hover:highlight">
            <button *ngIf="element.expanded" (click)="collapse(element)">
                <span class="pi pi-angle-down"></span>
            </button>
            <button *ngIf="!element.expanded" (click)="expand(element)">
                <span class="pi pi-angle-right"></span>
            </button>
        </div>
    </a>
</ng-template>

<div
        class="flex flex-col gap-2 justify-between w-full p-1.5 overflow-hidden max-w-56">
    <ng-container *ngFor="let element of elements">
        <span *ngIf="debug"><{{ element.label }} - {{ element.visible }} | {{ element.command }}></span>
        <div *ngIf="element.visible !== false">
            <ng-template
                    *ngTemplateOutlet="
          menuBtn;
          context: { $implicit: element }
        "></ng-template>

            <div
                    class="flex"
                    *ngIf="element.expanded && element.items && element.items.length > 0">
                <div
                        class="flex flex-col gap-2 justify-between w-full p-1.5 overflow-hidden max-w-56">
                    <ng-container *ngFor="let item of element.items">
                        <span *ngIf="debug"><{{ item.label }} - {{ item.visible }} | {{ item.command }}></span>
                        <div *ngIf="item.visible !== false">
                            <ng-template
                                    *ngTemplateOutlet="
                  menuBtn;
                  context: { $implicit: item }
                "></ng-template>
                        </div>
                    </ng-container>
                </div>
            </div>
        </div>
    </ng-container>
</div>
