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

    <div class="sidebar-logo">
      <a href="https://iot-master.com" target="_blank">
        <img src="assets/iot.svg" alt="logo">
        <h1>物联大师</h1>
      </a>
    </div>

    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <ng-container *ngFor="let menu of menus">
        <li nz-menu-item *ngIf="!menu.children" [routerLink]="menu.router" [nzDisabled]="menu.disabled"
            nz-tooltip
            nzTooltipPlacement="right"
            [nzTooltipTitle]="isCollapsed ? menu.title : ''"
            [nzMatchRouter]="menu.router" nzMatchRouterExact>
          <i nz-icon [nzType]="menu.icon" nzTheme="outline" *ngIf="menu.icon"></i>
          <span>{{menu.title}}</span>
        </li>
        <li nz-submenu *ngIf="menu.children" [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]="menu.router" nzMatchRouterExact>
              <i nz-icon [nzType]="m.icon" nzTheme="outline" *ngIf="m.icon"></i>
              {{m.title}}
            </li>
          </ul>
        </li>
      </ng-container>
    </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>
        <nz-breadcrumb style="display: inline-block" [nzAutoGenerate]="true"></nz-breadcrumb>
        <span class="header-right">
          <a href="https://github.com/zgwit/iot-master" target="_blank">
            <i nz-icon nzType="github" nzTheme="outline"></i>
            开源地址
          </a>
          <nz-divider nzType="vertical"></nz-divider>
          <a href="https://docs.iot-master.com" target="_blank">
            <i nz-icon nzType="book" nzTheme="outline"></i>
            帮助文档
          </a>
          <nz-divider nzType="vertical"></nz-divider>
          <a nz-popover [nzPopoverContent]="support" nzPopoverPlacement="bottomRight">
            <i nz-icon nzType="customer-service" nzTheme="outline"></i>
            联系客服
          </a>
          <ng-template #support>
            <img src="/assets/wx.png">
          </ng-template>
          <nz-divider nzType="vertical"></nz-divider>
          <span>
            <i nz-icon nzType="user" nzTheme="outline"></i>
            {{us.user?.nickname || us.user?.username}}
          </span>
        </span>
      </div>
    </nz-header>
    <nz-content>
      <router-outlet></router-outlet>
    </nz-content>
    <nz-footer class="app-footer">
      物联大师 {{version.version}}
      {{version.runtime}} {{version.build}} {{version.git}} gin@{{version.gin}}
      &copy; 2016~2022 <a href="https://zgwit.com" target="_blank">真格智能实验室</a>

    </nz-footer>
  </nz-layout>
</nz-layout>
