<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
  <ul class="al-sidebar-list">
    <li *ngFor="let item of menuItems" class="al-sidebar-list-item"
        [ngClass]="{'selected': item.selected, 'with-sub-menu': item.subMenu}">

      <a *ngIf="!item.subMenu" [routerLink]="[item.component]" class="al-sidebar-list-link">
        <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
      </a>

      <a *ngIf="item.subMenu" (mouseenter)="hoverItem($event, item)" (click)="toggleSubMenu($event, item)"
         class="al-sidebar-list-link">
        <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
        <b class="fa" [ngClass]="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
           *ngIf="item.subMenu"></b>
      </a>

      <ul *ngIf="item.subMenu" class="al-sidebar-sublist"
          [ngClass]="{expanded: item.expanded, 'slide-right': item.slideRight}">
        <li *ngFor="let subitem of item.subMenu"
            [ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
          <a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
             class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
            <b class="fa" *ngIf="subitem.subMenu"
               [ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
          </a>
          <ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
              [ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
            <li *ngFor="let subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
                [ngClass]="{selected: subitem.selected}">
              <a (mouseenter)="hoverItem($event, item)" [routerLink]="[item.component, subitem.component, subSubitem.component]">
                {{ subSubitem.title }}</a>
            </li>
          </ul>
          <a *ngIf="!subitem.subMenu" [routerLink]="[item.component, subitem.component]"
             (mouseenter)="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
            {{ subitem.title}}
          </a>
        </li>
      </ul>

    </li>
  </ul>
  <div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
       [ngClass]="{'show-hover-elem': showHoverElem }"></div>
</aside>
