Я разрабатываю приложение для Angular 6, в котором я хочу иметь адаптивную боковую панель и решил использовать модуль боковой панели углового материала.Проблема в том, что я хочу, чтобы на боковой панели был свернутый режим, который не полностью скрыт, что не так, как работает угловая боковая панель, поэтому я сделал что-то похожее на this (Medium.com).
Теперь, поведение, которое я хочу для своей боковой панели: я хочу, чтобы она могла быть свернута или развернута, когда разрешение экрана превышает 1366 ширины, и иметь режим, установленный на 'side', и когдаРазрешение меньше этого, я хочу, чтобы оно было установлено на 'side', если свернуто, или 'over', если развернуто.
Как я это сделал:
<div id="complete-container">
<mat-sidenav-container>
<mat-sidenav opened="True" [style.width]="isExpanded ? expandedWidth : collapsedWidth" [mode]="mode">
<app-sidebar *ngIf="isExpanded" [version]="version" [isExpanded]="isExpanded" (isExpandedEvent)="collapse($event)"></app-sidebar>
<app-collapsed-sidebar *ngIf="!isExpanded" [version]="version" [isExpanded]="isExpanded" (isExpandedEvent)="collapse($event)"></app-collapsed-sidebar>
</mat-sidenav>
<mat-sidenav-content [style.margin-left]="isExpanded ? expandedWidth : collapsedWidth">
<p>Main content</p>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
И на моем компоненте:
export class AppComponent {
mobileQuery: MediaQueryList;
private _mobileQueryListener: () => void;
isExpanded: boolean;
expandedWidth = '220px';
collapsedWidth = '80px';
mode: string;
constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
this.mobileQuery = media.matchMedia('(max-width: 1366px)');
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
this.mobileQuery.addListener(this._mobileQueryListener);
}
ngOnDestroy(): void {
this.mobileQuery.removeListener(this._mobileQueryListener);
}
ngOnInit(): void {
if (this.mobileQuery.matches) {
this.isExpanded = false;
} else {
this.isExpanded = true;
}
this.mode = 'side';
}
collapse(change: boolean) {
this.isExpanded = !this.isExpanded;
if (this.mobileQuery.matches && this.isExpanded) {
this.mode = 'over';
} else {
this.mode = 'side';
}
}
}
collapse() - это метод, который вызывается при нажатии кнопки, чтобы развернуть / свернуть боковую панель.
Теперь, в чем проблема?Когда ширина моего разрешения меньше 1366, а боковая панель переходит от развернутой к свернутой, основное содержимое смещается, как если бы боковая панель была установлена в режим 'side' (что правильно), но ее ширина была той, что быларазвернуто, а не свернуто.
Изображения того, как оно ведет себя:
Полноэкранный режим развернут (работает нормально) 
Полноэкранный режим свернут (работаетОК) 
Маленький экран расширен (работает нормально) 
Маленький экран свернулся (странное пространство между боковой панелью и основным содержимым) 
Кто-нибудь знает, почему он так себя ведет?Или как это сделать, чтобы получить ожидаемый результат?
Заранее спасибо