0

I'm making a sidenav and I use mat-expansion-panel to create the button of my sidenav.

I created submenu and I have no issue :

enter image description here

But now I want to add sub sub menu. For example I want to add, under Users list, a new submenu Add user. If possible, I want to use again mat-expansion-panel

Is there any possibility to achieve that ?

For now, here is my sidenav (it's all dynamic)

<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>
Nathan Cheval
  • 773
  • 2
  • 7
  • 32
  • You can definitely try to use `mat-expansion-panel` inside 'user list'. If you face any issue then let us know – Mir entafaz Ali Apr 30 '21 at 14:28
  • 1
    @NathanCheval You can https://stackblitz.com/edit/angular-wak4tf?file=src/app/expansion-expand-collapse-all-example.html see this example and click on personnel data and again click on open, then it will open form for data. – Developer Apr 30 '21 at 14:41
  • @NathanCheval Welcome. If you want to help then you can https://www.buymeacoffee.com/grdtech support here. In this pandemic your lil support be so helpful. Thank You. You can also contact on email grdtechlab@gmail.com also available to help. – Developer Apr 30 '21 at 15:05

0 Answers0