Блог

Я создаю sidenav и использую mat-expansion-panel его для создания кнопки моего sidenav.

Я создал подменю, и у меня нет проблем :

Но теперь я хочу добавить подменю. Например, я хочу добавить в разделе Users list новое подменю Add user . Если возможно, я хочу использовать снова mat-expansion-panel

Есть ли какая-либо возможность достичь этого ?

На данный момент, вот мой sidenav (все это динамично)

 <mat-sidenav #sidenav mode="side" opened class="w-1/6 flex flex-col h-full border-r border-green-400" style="top:0.1rem">
    <h3 class="text-center text-gray-900" style="margin-top: 0.75rem">{{ "SETTINGS.administration" | translate }}</h3>
    <mat-divider class="border-green-400"></mat-divider>
    <mat-nav-list>
        <mat-expansion-panel *ngFor="let parent of this.serviceSettings.getSettingsParent()"
                             [expanded]="this.serviceSettings.getSelectedParentSetting() == parent['id']">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{ parent['label'] | translate }}
                </mat-panel-title>
            </mat-expansion-panel-header>
            <div class="w-full border-t-2 border-gray-600">
                <div class="border-b border-gray-400 " *ngFor="let setting of this.serviceSettings.getSettings()[parent['id']];">
                    <button mat-button [class.text-green-400]="this.serviceSettings.getSelectedSetting() === setting['id']"
                            class="font-normal w-full h-20 flex justify-center items-center text-center"
                            (click)="this.serviceSettings.changeSetting(setting['id'], parent['id'])"
                            routerLink="{{ setting['route'] }}">
                        <i class="absolute left-4 w-10 h-10 rounded-full flex items-center justify-center fa-lg {{setting['icon']}}"> </i>
                        <p [class.font-medium]="this.serviceSettings.getSelectedSetting() === setting['id']" class="m-0">
                            {{ setting['label'] | translate }}
                        </p>
                    </button>
                </div>
            </div>
        </mat-expansion-panel>
    </mat-nav-list>
</mat-sidenav>