Я пытаюсь воссоздать следующую раскладку с помощью Angular Материал 2+ (8.2.3): https://codepen.io/kyleledbetter/pen/BjaeYJ
Я хочу заблокировать открытие 2 sidenavs, когда ширина планшета или больше. На мобильном устройстве навигация становится полноэкранной и переключается при нажатии на элемент.
На планшете при нажатии на элемент sidenavs должны оставаться на месте. В материале AngularJS было свойство 'md-is-locked-open', которое не позволяло toggle () закрывать sidenav. Как мне добиться этого в Angular Материал 2 +?
Я пытался добавить свойство disableClose к sidenavs, но безрезультатно.
Компонент:
<mat-sidenav-container class="takNav">
<mat-sidenav
#takDrawer
class="sidenav-list"
mode="side"
opened
>
<mat-toolbar class="mat-elevation-z2">Takken</mat-toolbar>
<mat-list>
<mat-list-item (click)="takDrawer.toggle()">Bevers</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Welpen</mat-list-item>
<mat-divider></mat-divider
></mat-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-sidenav-container class="drinkNav">
<mat-sidenav #drankDrawer class="sidenav-list" mode="side" opened>
<mat-toolbar class="mat-elevation-z2">
<button *ngIf="(isHandset$ | async)" type="button" mat-icon-button (click)="takDrawer.toggle()">
<mat-icon>arrow_back</mat-icon>
</button>
Dranken</mat-toolbar>
<mat-list>
<mat-list-item (click)="drankDrawer.toggle()">Cola</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Fanta</mat-list-item>
<mat-divider></mat-divider
></mat-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="mat-elevation-z2">
<button *ngIf="(isHandset$ | async)" type="button" mat-icon-button (click)="drankDrawer.toggle()">
<mat-icon>arrow_back</mat-icon>
</button>
Bevers - Cola</mat-toolbar>
<div class="card-container">
<app-poef-card leaderName="Thomas" amountOfDrinks="0"></app-poef-card>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</mat-sidenav-content>
</mat-sidenav-container>