<div class="_nc-side-wrap" [class._nc-side-auto-collapsed]="_autoCollapsed" *ngIf="ncSrv.activeApp">
  <div class="_nc-side-content" (mouseleave)="_collapseMenu($event)">
    <div class="_nc-side-menu-wrap">

      <!-- 应用 -->
      <div class="_nc-side-app-wrap">
        <div class="_nc-side-app-collapsed-trigger">
          <img *ngIf="ncSrv.activeApp?.icon" [src]="ncSrv.activeApp.icon | ncSafeUrl">
          <div>
            <span [title]="ncSrv.activeApp?.name || ''">{{ ncSrv.activeApp?.name }}</span>
          </div>
        </div>
        <div class="_nc-side-app-content">
          <nc-app-list></nc-app-list>
        </div>
      </div>

      <!-- 应用菜单 -->
      <div class="_nc-side-menu-content" (mouseenter)="_expandMenu($event)">
        <ng-container *ngFor="let menuItem of ncSrv.activeAppMenus | ncMenuFormat" [ngSwitch]="menuItem.type">
          <ng-container *ngSwitchCase="'item'">
            <a class="_nc-side-menu-item" [routerLink]="[ menuItem.route ]">
              <img *ngIf="menuItem.icon" [src]="menuItem.icon | ncSafeUrl">
              <div>
                <span [title]="menuItem.name">{{ menuItem.name }}</span>
              </div>
            </a>
          </ng-container>
          <ng-container *ngSwitchCase="'folder'">
            <div class="_nc-side-menu-folder" [class._nc-side-menu-folder-unfolded]="menuItem.unfolded"
              (click)="menuItem.unfolded = !menuItem.unfolded">
              <img *ngIf="menuItem.icon" [src]="menuItem.icon | ncSafeUrl">
              <div>
                <span [title]="menuItem.name">{{ menuItem.name }}</span>
              </div>
            </div>
            <div class="_nc-side-sub-menu" [@menuUnfolded]="menuItem.unfolded">
              <a class="_nc-side-sub-menu-item" *ngFor="let subMenuItem of menuItem.children"
                [routerLink]="[ subMenuItem.route ]">
                <div>
                  <span [title]="subMenuItem.name">{{ subMenuItem.name }}</span>
                </div>
              </a>
            </div>
          </ng-container>
        </ng-container>
      </div>

      <!-- 自动折叠开关 -->
      <div class="_nc-side-auto-collapsed-trigger">
        <i nz-icon
          [nzType]="_autoCollapsed ? 'menu-fold' : 'menu-unfold'"
          [title]="_autoCollapsed ? '固定展开' : '自动折叠'"
          (click)="_toggleAutoCollapsed($event)"></i>
      </div>

    </div>
  </div>
</div>