Режим боковой навигации материала не работает

Question

У меня есть угловое приложение, которое имеет основной контейнер sidenav.на одной из страниц я использую простой sidenav.все работает, но режим sidenav не работает, как ожидалось.Хотя я установил режим «side», он по умолчанию использует «over».

<mat-sidenav-container>
    <mat-sidenav [mode]="sidenavOption.mode"
                 position="start"
                 [opened]="sidenavOption.open"
                 appKvpDashboardSidenav
                 #leftsidenav>
        <app-left-sidenav [sidenav]="leftsidenav"
                          [isEditing]="isEditing"
                          [kvpDashboardId]="kvpDashboardId"
                          [kvpModelId]="kvpModelId"
                          [kvpModelPath]="kvpModelPath">
        </app-left-sidenav>
    </mat-sidenav>
    <mat-sidenav-content fxLayout="row">
        <app-kvp-sidenav-toggle (toggleClicked)="toggleSidenav()"></app-kvp-sidenav-toggle>
        <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

Я использую следующие настройки в файле .ts

sidenavoption.mode = 'side'

sidenavoption.open= true

Кто-нибудь может помочь, как заставить это работать?