main.component.html

<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="180px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">

    <div class="sidebar-logo">
      <a href="https://github.com/zgwit/iot-admin" target="_blank">
        <img src="assets/logo.svg" alt="logo">
        <h1>IoT Admin</h1>
      </a>
    </div>

    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu *ngFor="let menu of menus" [nzTitle]="menu.title" [nzIcon]="menu.icon" [nzOpen]="menu.open" [nzDisabled]="menu.disabled">
        <ul>
          <li nz-menu-item *ngFor="let m of menu.children" [routerLink]="m.router" [nzDisabled]="m.disabled" nzMatchRouter nzMatchRouterExact>
            <i nz-icon [nzType]="m.icon" nzTheme="outline" *ngIf="m.icon"></i>
            {{m.title}}
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>

      </div>
    </nz-header>
    <nz-content>
      <app-tabs></app-tabs>
    </nz-content>
  </nz-layout>
</nz-layout>