边栏在Angular Material中不可见

Question

试图以有角度的材质创建布局，但在排列组件后无法查看侧栏。我确实坚持这种布局安排。任何建议都会有所帮助。

输出中没有侧边栏：

.sidebarPadding{
  padding-left:320px;
}

.background{
  display: flex;
  flex-direction: column;
  background-color: #eeeeee;
  max-height: 100%;
  height: 100%;
}

.footer{
  min-height: 64px;
}

<mat-sidenav-container autosize class="background align-middle">
    <app-sidebar #sideNav></app-sidebar>   
    <mat-sidenav-content><!--[class.sidebarPadding]="!AppNav.toggleActive">--> 
        <app-navbar #AppNav (toggleNav)="sideNav.toggle()" (click)="logging(sideNav)"></app-navbar>
      <!--
      <crm-navigation-bar *ngIf="isAuthenticated()" (toggleSidenav)="navigationSidenav.toggle()">
      </crm-navigation-bar>
      -->
      <app-footer class="footer"></app-footer>
    </mat-sidenav-content>
    <router-outlet ></router-outlet>
</mat-sidenav-container>

<!-- app-sidebar Component-->

<mat-sidenav #sideNav mode="over" opened="opened" class="sidenav shadow" (load)="logging(sideNav)"
   [fixedInViewport]="true" [fixedTopGap]="0">
  <mat-toolbar class="overlay">
      <img mat-card-image src="../../../../assets/images/profile.jpg" alt="Photo of a Shiba Inu" class="profile-picture">
    <mat-toolbar-row>
    </mat-toolbar-row>
      <mat-toolbar-row>
    </mat-toolbar-row>
  </mat-toolbar>
   

</mat-sidenav>