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>
		<a class="menu-item" routerLink="">Home</a>
	</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="menu-count">{{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="menu-count">{{r.count}}</span>
					</a>
				</div>
			</ng-container>
		</div>
	</mat-expansion-panel>

	<mat-expansion-panel>
		<mat-expansion-panel-header>
			<mat-panel-title>Workflows</mat-panel-title>
		</mat-expansion-panel-header>
		<div>
			<div *ngFor="let s of wfSections">
				<a class="menu-item" [routerLink]="['wfs',  s.id]">{{s.name}}</a>
			</div>
		</div>
	</mat-expansion-panel>

	<mat-expansion-panel>
		<mat-expansion-panel-header>
			<mat-panel-title>Tools</mat-panel-title>
		</mat-expansion-panel-header>
		<div>
			<a class="menu-item" routerLink="mdstores">MDStore Inspector</a>
			<a class="menu-item" routerLink="cleaner">Cleaner Tester</a>
		</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>