<div class="page">
  <div class="content-left" [style.width]="isCollapsed ? '' : '248px'">
    <div class="btn-menu">
      <button mat-icon-button (click)="toggleCollapsed()" aria-label="LogOut" style="margin-right: 4px;">
        <mat-icon
        svgIcon="menu"
        ></mat-icon>
      </button>
      {{ isCollapsed ? "" : "教材遴选系统" }}
    </div>

    <ul
      [nzInlineCollapsed]="isCollapsed"
      nz-menu
      nzMode="inline"
      style="width: 100%; background: #f9eaea"
    >
      @for (item of optionsMap[textbook.profile?.identity]; track item.id;let index = $index) { @if(item.child)
      {
      <li nz-submenu [nzTitle]="item.name" nzIcon="api" [nzOpen]="true">
        <ul>
          @for (child of item.child; track child.id;let idx = $index) {
          <li
            nz-menu-item
            [nzSelected]="active == child.id"
            (click)="toUrl(child)"
          >
            {{ child.name }}
          </li>
          }
        </ul>
      </li>
      } @else {
      <li nz-menu-item (click)="toUrl(item)" [nzSelected]="active == item.id">
        <span nz-icon nzType="home" nzTheme="outline"></span>
        <span>{{ item.name }}</span>
      </li>
      } }
    </ul>
    <app-comp-nav
      [viewCollapsed]="isCollapsed"
      class="left-fonter"
      [style.width]="isCollapsed ? '248px' : ''"
    ></app-comp-nav>
  </div>
  <div class="preview">
    <router-outlet></router-outlet>
  </div>
</div>
