ShangHaiAcquisitionPlatform/src/app/navigation/navigation.component.html

<mat-sidenav-container class="example-container" autosize>
  <mat-sidenav #drawer class="example-sidenav" mode="side" opened="true" color="primary" style="overflow-x: hidden;">
    <div class="biglogobox">
      <img src="../../assets/images/logo2.png" alt="">
    </div>
    <div class="navbox">
      <ul>
        <!-- basicinfo -->
        <li [routerLink]="['/datacollection/basicinfo']" routerLinkActive="router-link-active">基本信息</li>
        <!-- plan -->
        <li [routerLink]="['/datacollection/collectionTools']" routerLinkActive="router-link-active">平面图</li>
        <!-- allaround -->
        <li [routerLink]="['/datacollection/allaround']" routerLinkActive="router-link-active">四周毗邻</li>
        <!-- fire-fighting-device -->
        <li [routerLink]="['/datacollection/fire-fighting-device']" routerLinkActive="router-link-active">消防设施</li>
        <!-- key-site  -->
        <li [routerLink]="['/datacollection/key-site']" routerLinkActive="router-link-active">重点部位</li>
        <!-- function-division -->
        <li [routerLink]="['/datacollection/function-division']" routerLinkActive="router-link-active">功能分区</li>
        <!-- realistic-picture -->
        <li [routerLink]="['/datacollection/realistic-picture']" routerLinkActive="router-link-active">实景图</li>
        <!-- uploading-cad   -->
        <li [routerLink]="['/datacollection/uploadingCAD']" routerLinkActive="router-link-active">上传CAD图</li>
      </ul>
    </div>
  </mat-sidenav>

  <button type="button" mat-button (click)="drawer.toggle()" class="shownav"><mat-icon>menu</mat-icon></button>

  <div class="example-sidenav-content">
    <div style="height: 64px;">
      <app-tabbar></app-tabbar>
    </div>
    <div style="flex: 1; overflow: hidden;">
      <router-outlet></router-outlet>
    </div>
  </div>
</mat-sidenav-container>