<nz-layout>
  <!--  start 头部 start-->
  <nz-header>
    <div nz-row>
      <!-- logo -->
      <div class="logo" nz-col nzSpan="4">
        <h2>超冠体育管理平台</h2>
      </div>
      <!-- logo -->

      <div class="menu" nz-col nzSpan="16">
        <ul>
          <li *ngFor="let item of menuData" [ngClass]="{'li-selected' : item.selected}" (click)="isSelected(item)">{{item.menuName}}</li>
        </ul>
      </div>
      <div class="user"  nz-col nzSpan="4">

        <div>
          <span nz-dropdown  [nzDropdownMenu]="menu">{{userInfo['userName']}}</span>

          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li nz-menu-item (click)="loginOut()">退出登录</li>
            </ul>
          </nz-dropdown-menu>
        </div>
      </div>
    </div>
  </nz-header>
  <!-- end 头部 end -->
  <nz-layout>
    <!--  start 侧边 start-->
    <nz-sider nzCollapsible [(nzCollapsed)]="isCollapse" [nzTrigger]="null" [nzCollapsedWidth]="0" >
      <div  class="side_menu" style="height: 50px;">
      <span
        class="trigger"
        nz-icon
        [nzType]="isCollapse ? 'menu-unfold' : 'menu-fold'"
        (click)="isCollapse = !isCollapse"
      ></span>
      </div>
      <!-- start 菜单内容 end-->
      <div>
        <ul nz-menu nzMode="inline">
          <li nz-submenu nzOpen *ngFor="let item of leftMenuData" nzTitle="{{item.menuName}}" nzIcon="{{item.menuUrlImg}}" >
            <ul>
              <li nz-menu-item nzMatchRouter *ngFor="let childMenu of item['childMenuList']">
                <a [routerLink]="[currentParentMenu['menuUrl'], childMenu['menuUrl']]" [queryParams]="{title: childMenu['menuName']}">{{childMenu['menuName']}}</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>



      <!-- start 菜单内容 end -->
    </nz-sider>
    <!-- end 侧边 end -->
    <!--  start 主体 start-->
    <nz-content>
        <app-tab></app-tab>
    </nz-content>
    <!-- end 主体 end -->
  </nz-layout>
</nz-layout>


