Ширина сиденава не адаптируется автоматически, когда я скрываю элементы и оставаюсь только с значками. Это остается фиксированной шириной, независимо от того, обрушился ли я в сиденаве или нет. src = "https://i.sstatic.net/bhbr1s1z.png"/>
html файл:
html:
html
chevron_right
@for (item of menuItems; track $index) {
{{ item.data?.['icon'] || 'default_icon' }}
{{ item.title }}
}
< /code>
ts file: < /p>
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() {
}
}
< /code>
css file: < /p>
: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);
}
Подробнее здесь: https://stackoverflow.com/questions/789 ... ot-working
