<da-layout>
  <da-layout-header [class.da-no-logo]="layoutConfig['hideLogo']">
    <da-header-logo
      *ngIf="
        (layoutConfig.mode === 'headerTop' || isSidebarFold) &&
        !layoutConfig['hideLogo']
      "
      [shrink]="isSidebarFold"
    ></da-header-logo>
    <span
      *ngIf="isSidebarFold"
      class="da-header-collapsed-button"
      (click)="openSideMenuDrawer()"
    >
      <i class="icon icon-list-view"></i>
    </span>
    <da-navbar
      *ngIf="layoutConfig.id === 'topNav' && !isSidebarFold"
      [data]="menu"
      [mode]="'top'"
      style="flex: 1 1 0%"
    ></da-navbar>
    <div
      *ngIf="layoutConfig.id !== 'topNav' || isSidebarFold"
      style="flex: 1 1 0%"
    ></div>
    <da-header></da-header>
  </da-layout-header>
  <da-layout-sidebar>
    <da-header-logo
      *ngIf="layoutConfig.mode !== 'headerTop' && !layoutConfig['hideLogo']"
      [shrink]="isSidebarShrink"
    ></da-header-logo>
    <da-side-menu *ngIf="!isSidebarShrink" [data]="menu"></da-side-menu>
    <da-navbar
      *ngIf="isSidebarShrink"
      [data]="menu"
      [mode]="'left'"
    ></da-navbar>
    <div class="da-sidebar-tools">
      <ul class="da-sidebar-tools-list">
        <li
          class="da-sidebar-tools-item"
          (click)="sidebarShrink(!isSidebarShrink)"
        >
          <i
            class="icon"
            [ngClass]="{
              'icon-fold-bar': !isSidebarShrink,
              'icon-unfold-bar': isSidebarShrink
            }"
          ></i>
        </li>
      </ul>
    </div>
  </da-layout-sidebar>
  <div>
    <router-outlet></router-outlet>
  </div>
  <da-layout-footer>
    <da-footer></da-footer>
  </da-layout-footer>
</da-layout>

<d-back-top
  [right]="'20px'"
  [bottom]="'78px'"
></d-back-top>

<div class="da-multi-settings" (click)="openSettingDrawer()">
  <i class="icon icon-setting"></i>
</div>
<div class="da-personalize-config" (click)="personalizeConfig()">
  <!-- TODO: 使用图标更换 -->
  <svg
    width="18px"
    height="18px"
    viewBox="0 0 16 16"
  >
    <g
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd"
    >
      <path
        d="M4.75056114,1.19593773 L15.7107162,12.1560928 L12.8822891,14.98452 L1.92213402,4.02436485 C1.72687187,3.82910271 1.72687187,3.51252022 1.92213402,3.31725807 L4.04345436,1.19593773 C4.23871651,1.00067558 4.555299,1.00067558 4.75056114,1.19593773 Z M7.22543488,5.08502502 L5.81122131,6.49923859 L12.8822891,13.5703064 L14.2965027,12.1560928 L7.22543488,5.08502502 Z M4,10 C4.27614237,10 4.5,10.2238576 4.5,10.5 L4.5,11 L5,11 C5.27614237,11 5.5,11.2238576 5.5,11.5 C5.5,11.7761424 5.27614237,12 5,12 L4.5,12 L4.5,12.5 C4.5,12.7761424 4.27614237,13 4,13 C3.72385763,13 3.5,12.7761424 3.5,12.5 L3.5,12 L3,12 C2.72385763,12 2.5,11.7761424 2.5,11.5 C2.5,11.2238576 2.72385763,11 3,11 L3.5,11 L3.5,10.5 C3.5,10.2238576 3.72385763,10 4,10 Z M1,11 C1.27614237,11 1.5,11.2238576 1.5,11.5 C1.5,11.7761424 1.27614237,12 1,12 C0.723857625,12 0.5,11.7761424 0.5,11.5 C0.5,11.2238576 0.723857625,11 1,11 Z M15,6 C15.2761424,6 15.5,6.22385763 15.5,6.5 C15.5,6.77614237 15.2761424,7 15,7 C14.7238576,7 14.5,6.77614237 14.5,6.5 C14.5,6.22385763 14.7238576,6 15,6 Z M4.39700775,2.2565979 L2.98279419,3.67081146 L5.10411453,5.7921318 L6.51832809,4.37791824 L4.39700775,2.2565979 Z M11,1 C11.2761424,1 11.5,1.22385763 11.5,1.5 L11.5,2 L12,2 C12.2761424,2 12.5,2.22385763 12.5,2.5 C12.5,2.77614237 12.2761424,3 12,3 L11.5,3 L11.5,3.5 C11.5,3.77614237 11.2761424,4 11,4 C10.7238576,4 10.5,3.77614237 10.5,3.5 L10.5,3 L10,3 C9.72385763,3 9.5,2.77614237 9.5,2.5 C9.5,2.22385763 9.72385763,2 10,2 L10.5,2 L10.5,1.5 C10.5,1.22385763 10.7238576,1 11,1 Z"
      ></path>
    </g>
  </svg>
</div>