<li
  *ngIf="!menuItem.hidden"
  [title]="menuItem.title"
  [ngClass]="{
    'al-sidebar-list-item': !child,
    'sa-sidebar-sublist-item': child,
    'selected': menuItem.selected && !menuItem.expanded,
    'with-sub-menu': menuItem.children,
    'sa-sidebar-item-expanded': menuItem.expanded
  }"
>
  <a
    *ngIf="!menuItem.children && !menuItem.url"
    (mouseenter)="onHoverItem($event)"
    [routerLink]="menuItem.route.paths"
    class="al-sidebar-list-link"
  >
    <ion-icon *ngIf="menuItem.icon" [name]="menuItem.icon" [class]="'icon ' + menuItem.icon"></ion-icon>
    <span>{{ menuItem.title }}</span>
  </a>
  <a
    *ngIf="!menuItem.children && menuItem.url"
    (mouseenter)="onHoverItem($event)"
    [href]="menuItem.url"
    [target]="menuItem.target"
    class="al-sidebar-list-link"
  >
    <ion-icon *ngIf="menuItem.icon" [name]="menuItem.icon" [class]="'icon ' + menuItem.icon"></ion-icon>
    <span>{{ menuItem.title }}</span>
  </a>
  <a
    href
    class="al-sidebar-list-link"
    *ngIf="menuItem.children"
    (mouseenter)="onHoverItem($event)"
    (click)="onToggleSubMenu($event, menuItem)"
  >
    <ion-icon *ngIf="menuItem.icon" [name]="menuItem.icon" [class]="'icon ' + menuItem.icon"></ion-icon>
    <span>{{ menuItem.title }}</span>
    <ion-icon class="arrow-icon" [name]="menuItem.expanded ? 'caret-down' : 'caret-up'"></ion-icon>
  </a>
  <ul
    class="al-sidebar-sublist"
    *ngIf="menuItem.children"
    [ngClass]="{ 'slide-right': menuItem.slideRight }"
  >
    <sa-menu-item
      [menuItem]="subItem"
      [child]="true"
      (itemHover)="onHoverItem($event)"
      (toggleSubMenu)="onToggleSubMenu($event, subItem)"
      *ngFor="let subItem of menuItem.children"
    >
    </sa-menu-item>
  </ul>
</li>
