edu-textbook/projects/textbook/src/app/comp-manage/comp-manage.component.html

<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: 12px;">
        <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="project" [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="project" 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>