Angular Material does not toggle Mat-SideNav

Question

<mat-toolbar color="primary">
    <mat-toolbar-row>
        <button mat-icon-button>
            <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
        </button>
        <h1>{{applicationName}}</h1>
        <span class="menu-spacer"></span>
        <div>
            <a mat-button [routerLink]="'/create-account'"> Create Account </a>
            <a mat-button [routerLink]="'/contacts'"> Contact Us </a>
            <a mat-button [routerLink]="'/create-contact'"> Login </a>
        </div>
    </mat-toolbar-row>

    <mat-toolbar-row>
        <span style="font-size: 12px;">{{applicationName}} helps you!</span>
    </mat-toolbar-row>
</mat-toolbar>

<mat-sidenav-container>
    <mat-sidenav #sidenav>
        <mat-nav-list>
            <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
            <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
            <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
            <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
            <a mat-list-item [routerLink]="'/activities'"> Activities </a>
            <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
            <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <div style="height: 88vh;">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

TypeScript File

import {Component, OnInit} from '@angular/core';
import {environment} from "../../../../environments/environment";

@Component({
    selector: 'app-headerdefault',
    templateUrl: './default.component.html',
    styleUrls: ['./default.component.css']
})
export class HeaderDefaultComponent implements OnInit{
    applicationName: string = "untitled"

    ngOnInit() {
        this.applicationName = environment.applicationName;
    }
}

When I click toggle, nothing appears to have happened.

I am using Angular 16 and Angular Material

Link to project https://www.dropbox.com/scl/fi/c42oz76nnqjzwuvzhw81k/banking-frontend.zip?rlkey=9jetvayqchlpbhkuy61wkl9e5&dl=0

Answer 1

Place the click handler on the <button>, not the <mat-icon>:

<button mat-icon-button (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
</button>