Angular Material Side Navigation with Expandable Menus

account.component.html

<mat-toolbar color="accent">
    <button mat-icon-button matTooltip="Application Menu" (click)="sidenav.toggle()">
        <mat-icon>settings</mat-icon>
    </button>
    Account Settings
    <span style="flex: 1 1 auto;"></span>
    <div>
        <button mat-icon-button matTooltip="Switch Apps">
            <mat-icon>apps</mat-icon>
        </button>
        <button mat-icon-button matTooltip="Notifications">
            <mat-icon>notifications</mat-icon>
        </button>
        <button mat-icon-button matTooltip="My Account" [matMenuTriggerFor]="accountMenu">
            <mat-icon>account_circle</mat-icon>
        </button>
        <mat-menu #accountMenu [overlapTrigger]="false" yPosition="below">
            <button mat-menu-item routerLink="#">
                <mat-icon>person</mat-icon><span>My Account</span>
            </button>
            <button mat-menu-item>
                <mat-icon>help</mat-icon><span>Help</span>
            </button>
            <mat-divider></mat-divider>
            <button mat-menu-item>
                <mat-icon>exit_to_app</mat-icon>Logout
            </button>
        </mat-menu>
    </div>
</mat-toolbar>
<mat-sidenav-container style="height: calc(100% - 64px); margin: 0;">
    <mat-sidenav #sidenav mode="side" [class.mat-elevation-z4]="true" style="width: 240px">
        <mat-nav-list dense>
            <mat-list-item routerLink="#"><mat-icon>dashboard</mat-icon>Dashboard</mat-list-item>
            <mat-list-item routerLink="#"><mat-icon>check_box</mat-icon>General</mat-list-item>
            <mat-list-item routerLink="#"><mat-icon>person</mat-icon>Profile</mat-list-item>
            <mat-list-item routerLink="#"><mat-icon>notification_important</mat-icon>Notification</mat-list-item>
            <mat-expansion-panel [class.mat-elevation-z0]="true" dense>
                <mat-expansion-panel-header>
                    Preference
                </mat-expansion-panel-header>
                <mat-nav-list dense>
                    <a mat-list-item routerLink="#"><mat-icon>attach_money</mat-icon>Billing</a>
                    <a mat-list-item routerLink="#"><mat-icon>notification_important</mat-icon>Notification</a>
                </mat-nav-list>
            </mat-expansion-panel>
            <mat-expansion-panel [class.mat-elevation-z0]="true" dense>
                <mat-expansion-panel-header>
                    Privacy
                </mat-expansion-panel-header>
                <mat-nav-list dense>
                    <a mat-list-item routerLink="#"><mat-icon>person_add</mat-icon>Partnership Request</a>
                    <a mat-list-item routerLink="#"><mat-icon>visibility</mat-icon>Profile Visibility</a>
                </mat-nav-list>
            </mat-expansion-panel>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet>
            <div class="container mat-body-1">
                Account Component
            </div>
        </router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

Very good

It helped