dnet-applications/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html

<div class="collapse-buttons">
    <button mat-button color="primary" (click)="accordion.openAll()">Expand All</button>
    <button mat-button color="primary" (click)="accordion.closeAll()">Collapse All</button>
</div>

<mat-accordion multi>
    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>Home</mat-panel-title>
        </mat-expansion-panel-header>
        <div>...</div>
    </mat-expansion-panel>
    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>Datasources</mat-panel-title>
        </mat-expansion-panel-header>
        <div>
            <a class="menu-item" [routerLink]="['dsm/search']">Search</a>
        </div>
    </mat-expansion-panel>


    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>Simple Resources</mat-panel-title>
        </mat-expansion-panel-header>
        <div>
            <ng-container *ngFor="let r of resTypes">
                <div *ngIf="r.simple">
                    <a class="menu-item" [routerLink]="['resources/' + r.id]">
                        {{r.name}} 
                        <span class="badge-label badge-info">{{r.count}}</span>
                    </a>
                </div>
            </ng-container>
        </div>
    </mat-expansion-panel>

    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>Advanced Resources</mat-panel-title>
        </mat-expansion-panel-header>
        <div>
            <ng-container *ngFor="let r of resTypes">
                <div *ngIf="!r.simple">
                    <a class="menu-item" [routerLink]="['adv_resources/' + r.id]">
                        {{r.name}} 
                        <span class="badge-label badge-info">{{r.count}}</span>
                    </a>
                </div>
            </ng-container>
        </div>
    </mat-expansion-panel>

    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>Logs</mat-panel-title>
        </mat-expansion-panel-header>
        <div>
            <a class="menu-item" [routerLink]="['wf_history']">Workflow History</a>
        </div>
    </mat-expansion-panel>

    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>Info</mat-panel-title>
        </mat-expansion-panel-header>
        <div>
            <a class="menu-item" [routerLink]="['info']">Container Info</a>
        </div>
    </mat-expansion-panel>
</mat-accordion>