CODEWITHSUNDEEP
cssangularangular-materialsidenavmat-sidenav
Imad
Imad

Reputation: 33

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.

NOT COLLAPSED COLLAPSED

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);
}

Upvotes: 0

Views: 191

Answers (2)

user2113177
user2113177

Reputation: 350

I experience the same, even the first example on the official Angular Material side does not work since months. And I am wondering, why so few people complain. This post is the only I found.

Upvotes: 0

nielcleo
nielcleo

Reputation: 76

autosize i think is not working with angular material 3, but somehow you can create a work around. sharing you some sample I bumped around when I work on this as well.

Autosize Sidenav

Credit to the author of this.

Hope it helps! Cheers!

Upvotes: 0

Related Questions