<div>
  <aside id="leftsidebar" class="sidebar" (mouseenter)="mouseHover()" (mouseleave)="mouseOut()">
    <div class="menu">
      <ng-scrollbar [style.height]="listMaxHeight + 'px'" visibility="hover">
        <ul id="sidebarnav" class="list">
          <ng-container *ngFor="let sidebarItem of sidebarItems">
            <ng-container *ngIf="sidebarItem.claims.length === 0">
              <li [routerLinkActiveOptions]="{exact: true}"
                [routerLinkActive]="sidebarItem.submenu.length !== 0 ? 'active' : 'active-top'">
                <div class="header" *ngIf="sidebarItem.groupTitle === true">{{sidebarItem.title | translate}}</div>
                <a [routerLink]="sidebarItem.class === '' ? [sidebarItem.path] : null" *ngIf="!sidebarItem.groupTitle;"
                  [ngClass]="[sidebarItem.class]" class="menu-top"
                  (click)="callToggleMenu($event, sidebarItem.submenu.length)">
                  <i-feather [name]="sidebarItem.icon" class="sidebarIcon"></i-feather>
                  <span class="hide-menu">{{sidebarItem.title | translate}}
                  </span>
                </a>
              </li>
            </ng-container>

            <ng-container *ngIf="sidebarItem.claims.length > 0">
              <li *hasClaim="sidebarItem.claims" [routerLinkActiveOptions]="{exact: true}"
                [routerLinkActive]="sidebarItem.submenu.length !== 0 ? 'active' : 'active-top'">
                <div class="header" *ngIf="sidebarItem.groupTitle === true">{{sidebarItem.title | translate}}</div>
                <a [routerLink]="sidebarItem.class === '' ? [sidebarItem.path] : null" *ngIf="!sidebarItem.groupTitle;"
                  [ngClass]="[sidebarItem.class]" class="menu-top"
                  (click)="callToggleMenu($event, sidebarItem.submenu.length)">
                  <i-feather [name]="sidebarItem.icon" class="sidebarIcon"></i-feather>
                  <span class="hide-menu">{{sidebarItem.title | translate}}
                  </span>
                </a>
                <ul class="ml-menu" *ngIf="sidebarItem.submenu.length > 0">
                  <ng-container *ngFor="let sidebarSubItem1 of sidebarItem.submenu">
                    <li *hasClaim="sidebarSubItem1.claims" [routerLinkActive]="sidebarSubItem1.submenu.length > 0 ? '' : 'active'">
                      <a [routerLink]="sidebarSubItem1.submenu.length > 0 ? null : [sidebarSubItem1.path]"
                        (click)="callToggleMenu($event,sidebarSubItem1.submenu.length)"
                        [ngClass]="[sidebarSubItem1.class]">
                        {{sidebarSubItem1.title | translate}}
                      </a>
                    </li>
                  </ng-container>
                </ul>
              </li>
            </ng-container>
          </ng-container>
        </ul>
      </ng-scrollbar>
    </div>
  </aside>
</div>