Angular Material18 SideNav autosize not working

The width of the sidenav does not adapt automatically when I hide the items and stay only with the icons. It remains a fixed width, no matter if I collapse the sidenav or not.

I have set the autosize to true and nothing.

I using "@angular/material": "^18.2.3" and angular 18.



HTML FILE:

<mat-sidenav-container autosize="true">
<mat-sidenav #sidenav mode="side" opened="isExpanded">
<mat-nav-list>

<mat-list-item (click)="isExpanded = !isExpanded">
<mat-icon mat-list-icon class="chevron-button" [ngClass]="{ rotated: isExpanded }">chevron_right</mat-icon>
</mat-list-item>

@for (item of menuItems; track $index) {
<mat-list-item [routerLink]="item.path">
<mat-icon matListItemIcon>{{ item.data?.['icon'] || 'default_icon' }}</mat-icon>
<span *ngIf="isExpanded" class="menu-item">{{ item.title }}</span>
</mat-list-item>
}

</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>

</mat-sidenav-container>


TS FILE:

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
import { routes } from '../../app.routes';
import { RouterModule } from '@angular/router';
import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatRadioModule } from '@angular/material/radio';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';

@Component({
selector: 'app-side-menu',
standalone: true,
imports: [
CommonModule,
RouterModule,
MatButtonModule,
MatRadioModule,
FormsModule,
ReactiveFormsModule,
MatSidenavModule,
MatIconModule,
MatListModule,
MatToolbarModule
],
templateUrl: './side-menu.component.html',
styleUrl: './side-menu.component.css',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SideMenuComponent {

public menuItems = routes
.map( route => route.children ?? [] )
.flat()
.filter( route => route?.path )
.filter( route => !route.path?.includes(':') )

isExpanded: boolean = true;

constructor() {
}
}


CSS FILE:

:host {
display: block;
}

mat-sidenav-container {
height: 100%;
}

.menu-item {
margin-left: 8px;
}

.chevron-button {
transition: 300ms ease-in-out;
transform: rotate(0deg);
}

.chevron-button.rotated {
transform: rotate(180deg);
}

Continue reading...