@if (!item().hidden) {
  <!-- Horizontal Layout -->
  @if (themeLayout === 'horizontal') {
    <li
      (mouseenter)="navCollapse($event)"
      data-username="mantis dashboard"
      class="nav-item coded-hasmenu"
      [routerLinkActive]="['active']"
      [ngClass]="{ disabled: !isEnabled }"
      [ngClass]="item().groupClasses"
      ngbTooltip="{{ !isEnabled ? 'You do not have permission to access this page!! ' : '' }}"
    >
      <a [routerLinkActive]="['active']" href="javascript:" class="arrow-edge nav-link">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
      </a>
      <ng-container *ngTemplateOutlet="subMenuContent"></ng-container>
    </li>
  }

  <!-- Vertical Layout -->
  @if (themeLayout === 'vertical') {
    <li
      class="nav-item coded-hasmenu"
      [routerLinkActive]="['active']"
      ngbTooltip="{{ !isEnabled ? 'You do not have permission to access this page!!! ' : '' }}"
    >
      <a
        [routerLinkActive]="['active']"
        href="javascript:"
        class="nav-link"
        [ngClass]="{ disabled: !isEnabled }"
        (click)="navCollapse($event)"
      >
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
      </a>
      <ng-container *ngTemplateOutlet="subMenuContent"></ng-container>
    </li>
  }

  <!-- Compact Layout -->
  @if (themeLayout === 'compact') {
    <li data-username="mantis dashboard" class="nav-item coded-hasmenu" [routerLinkActive]="['active']" (click)="subMenuCollapse(item())">
      <a class="nav-link" [ngClass]="{ disabled: !isEnabled }">
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
      </a>
      <ng-container *ngTemplateOutlet="subMenuContent"></ng-container>
    </li>
  }

  <!-- all layout common -->
  <ng-template #itemContent>
    @if (item().icon) {
      <span class="coded-micon">
        <i antIcon type="{{ item().icon }}" theme="outline"></i>
      </span>
    }
    <span class="coded-mtext">
      {{ item().title | translate }}
    </span>
  </ng-template>
  <ng-template #subMenuContent>
    <ul class="coded-submenu" [routerLinkActive]="['active']" [ngClass]="item().classes!">
      @for (items of item().children; track items) {
        @if (items.type === 'item') {
          <app-nav-item
            [item]="items"
            [parentRole]="item().role && item().role.length > 0 ? item().role : parentRole().role"
          ></app-nav-item>
        } @else if (items.type === 'collapse') {
          <app-nav-collapse
            [item]="items"
            [parentRole]="item().role && item().role.length > 0 ? item().role : parentRole().role"
          ></app-nav-collapse>
        }
      }
    </ul>
  </ng-template>
}