<!-- START Sidebar (left)-->
<div class="aside-inner" style="overflow: hidden;width:220px;" (click)='reloadMenu()'>
    <nav class="sidebar" style="width: 100%;background: #1479cc;overflow:auto;" sidebar-anyclick-close="" [class.show-scrollbar]="settings.getLayoutSetting('asideScrollbar')">

        <!-- START sidebar nav-->
        <ul *ngIf="levelOnemenuItems.length>5" class="sidebar-nav">

            <!-- START user info-->
            <li style="margin-left:0px;" class="has-user-block">
                <app-userblock></app-userblock>
            </li>
            <!-- END user info-->

            <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let item of menuItems' [ngClass]="{'nav-heading': item.heading ,'nav-subitem-level1':!item.heading}" [routerLinkActive]="['active']">
                <!-- menu heading -->
              <div style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngIf="item.heading" (click)="toggleHeadingmenuClick($event)">
                <span class="span-class">{{item.text}}</span>
                
            </div>
                <!-- external links -->
                <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="!item.heading && !item.submenu && item.elink" [attr.target]="item.target" [attr.href]="item.elink" title="{{item.text}}">
                    <span class="float-right" *ngIf="item.alert" [ngClass]="item.label || 'badge badge-success'">{{item.alert}}</span>
                    <span class="span-class">{{item.text}}</span>
                </a>
                <!-- single menu item -->
                <a  (click)="changeAClass($event,index)" style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="!item.heading && !item.submenu && !item.elink && !(item.link && item.link.indexOf('http') != -1)" [routerLink]="item.link" [attr.route]="item.link" title="{{item.text}}"
                    (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                    <span class="float-right" *ngIf="item.alert" [ngClass]="item.label || 'badge badge-success'">{{item.alert}}</span>
                    <span class="span-class">{{item.text}}</span>
                </a>

                <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngIf="!item.heading && !item.submenu && !item.elink && (item.link && item.link.indexOf('http') != -1)"  title="{{item.text}}"
                    (click)="openWin(item.link)" >
                    <span class="float-right" *ngIf="item.alert" [ngClass]="item.label || 'badge badge-success'">{{item.alert}}</span>
                    <span class="span-class">{{item.text}}</span>
                </a>

                <!-- has submenu -->
                <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="!item.heading && item.submenu" title="{{item.text}}"
                    (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                        <span class="float-right" *ngIf="item.alert" [ngClass]="item.label || 'badge badge-success'">{{item.alert}}</span>
                         <!--  <em class="{{item.icon}}" *ngIf="item.icon"></em>-->
                        <span class="span-class">{{item.text}}</span><i class="icon-arrow-down"></i>
                </a>
                <!-- SUBLEVEL -->
                <ul *ngIf="item.submenu" class="sidebar-nav sidebar-subnav" [routerLinkActive]="['opening']">
                    <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" class="sidebar-subnav-header">{{item.text}}</li>
                    <li (click)="changeClass($event,index)" style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let subitem of item.submenu' [routerLinkActive]="['active']">
                        <!-- sublevel: external links -->
                        <a style="margin-left:0px;color: #fff;" href *ngIf="!subitem.heading && !subitem.submenu && subitem.elink" [attr.target]="subitem.target" [attr.href]="subitem.elink" title="{{subitem.text}}">
                            <span class="float-right" *ngIf="subitem.alert" [ngClass]="subitem.label || 'badge badge-success'">{{subitem.alert}}</span>
                            <span class="span-class" style="margin-left: -20px;">{{ subitem.text}}</span>
                        </a>
                        <!-- sublevel: single menu item  -->
                        <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="!subitem.submenu && !subitem.elink && !(subitem.link && subitem.link.indexOf('http') != -1)" [routerLink]="subitem.link" [attr.route]="subitem.link" title="{{subitem.text}}">
                            <span class="float-right" *ngIf="subitem.alert" [ngClass]="subitem.label || 'badge badge-success'">{{subitem.alert}}</span>
                            <span class="span-class" style="margin-left: -20px;">{{ subitem.text}}</span>
                        </a>

                        <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngIf="!subitem.submenu && !subitem.elink && (subitem.link && subitem.link.indexOf('http') != -1)" [routerLink]="subitem.link" [attr.route]="subitem.link" title="{{subitem.text}}"
                        (click)="openWin(subitem.link)">
                            <span class="float-right" *ngIf="subitem.alert" [ngClass]="subitem.label || 'badge badge-success'">{{subitem.alert}}</span>
                            <span class="span-class" style="margin-left: -20px;">{{ subitem.text}}</span>
                        </a>

                       
                        <!-- sublevel: has submenu -->
                        <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="subitem.submenu" title="{{subitem.text}}"
                            (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                                <span class="float-right" *ngIf="subitem.alert" [ngClass]="subitem.label || 'badge badge-success'">{{subitem.alert}}</span>
                                <span class="span-class" style="margin-left: -20px;">{{ subitem.text}}</span>
                        </a>
                        <!-- SUBLEVEL 2 -->
                        <ul *ngIf="subitem.submenu" class="sidebar-nav sidebar-subnav level2" [routerLinkActive]="['opening']">
                            <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let subitem2 of subitem.submenu' [routerLinkActive]="['active']">
                                <!-- sublevel 2: single menu item  -->
                                <a style="margin-left:0px;color: #fff;" href *ngIf="!subitem2.submenu" [routerLink]="subitem2.link" [attr.route]="subitem2.link" title="{{subitem2.text}}">
                                    <span class="float-right" *ngIf="subitem2.alert" [ngClass]="subitem2.label || 'badge badge-success'">{{subitem2.alert}}</span>
                                    <em class="{{subitem2.icon}}" *ngIf="subitem2.icon"></em>
                                    <span class="span-class">{{subitem2.text}}</span>
                                </a>
                                <!-- sublevel2: has submenu -->
                                <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="subitem2.submenu" title="{{subitem2.text}}"
                                    (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                                        <span class="float-right" *ngIf="subitem2.alert" [ngClass]="subitem2.label || 'badge badge-success'">{{subitem2.alert}}</span>
                                        <em class="{{subitem2.icon}}" *ngIf="subitem2.icon"></em>
                                        <span class="span-class">{{subitem2.text}}</span>
                                </a>
                                <!-- SUBLEVEL 3 -->
                                <ul *ngIf="subitem2.submenu" class="sidebar-nav sidebar-subnav level3" [routerLinkActive]="['opening']">
                                    <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let subitem3 of subitem2.submenu' [routerLinkActive]="['active']">
                                        <!-- sublevel 2: single menu item  -->
                                        <a style="margin-left:0px;" href *ngIf="!subitem3.submenu" [routerLink]="subitem3.link" [attr.route]="subitem3.link" title="{{subitem3.text}}">
                                            <span class="float-right" *ngIf="subitem3.alert" [ngClass]="subitem3.label || 'badge badge-success'">{{subitem3.alert}}</span>
                                            <em class="{{subitem3.icon}}" *ngIf="subitem3.icon"></em>
                                            <span class="span-class">{{ subitem3.text}}</span>
                                        </a>
                                        <!-- sublevel3: has submenu -->
                                        <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="subitem3.submenu" title="{{subitem3.text}}"
                                            (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                                                <span class="float-right" *ngIf="subitem3.alert" [ngClass]="subitem3.label || 'badge badge-success'">{{subitem3.alert}}</span>
                                                <em class="{{subitem3.icon}}" *ngIf="subitem3.icon"></em>
                                                <span class="span-class">{{ subitem3.text}}</span>
                                        </a>
                                        <!-- SUBLEVEL 4 -->
                                        <ul *ngIf="subitem3.submenu" class="sidebar-nav sidebar-subnav level3" [routerLinkActive]="['opening']">
                                            <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let subitem4 of subitem3.submenu' [routerLinkActive]="['active']">
                                                <!-- sublevel 2: single menu item  -->
                                                <a style="margin-left:0px;" href *ngIf="!subitem4.submenu" [routerLink]="subitem4.link" [attr.route]="subitem4.link" title="{{subitem4.text}}">
                                                    <span class="float-right" *ngIf="subitem4.alert" [ngClass]="subitem4.label || 'badge badge-success'">{{subitem4.alert}}</span>
                                                    <em class="{{subitem4.icon}}" *ngIf="subitem4.icon"></em>
                                                    <span class="span-class">{{ subitem4.text}}</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            <li>
                        </ul>
                    <li>
                </ul>
            </li>

        </ul>

        <ul *ngIf="!(levelOnemenuItems.length>5)" class="sidebar-nav">

            <!-- START user info-->
            <li style="margin-left:0px;" class="has-user-block">
                <app-userblock></app-userblock>
            </li>
            <!-- END user info-->

            <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let item of levelTwomenuItems' [ngClass]="{'nav-heading': item.heading ,'nav-subitem-level1':!item.heading}" [routerLinkActive]="['active']">
                <!-- menu heading -->
              <div style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngIf="item.heading" (click)="toggleHeadingmenuClick($event)">
                <span class="span-class">{{item.text}}</span>
                
            </div>
                <!-- external links -->
                <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="!item.heading && !item.submenu && item.elink" [attr.target]="item.target" [attr.href]="item.elink" title="{{item.text}}">
                    <span class="float-right" *ngIf="item.alert" [ngClass]="item.label || 'badge badge-success'">{{item.alert}}</span>
                    <span class="span-class">{{item.text}}</span>
                </a>
                <!-- single menu item -->
                <a  (click)="changeAClass($event,index)" style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="!item.heading && !item.submenu && !item.elink && !(item.link && item.link.indexOf('http') != -1)" [routerLink]="item.link" [attr.route]="item.link" title="{{item.text}}"
                    (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                    <span class="float-right" *ngIf="item.alert" [ngClass]="item.label || 'badge badge-success'">{{item.alert}}</span>
                    <span class="span-class">{{item.text}}</span>
                </a>

                <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngIf="!item.heading && !item.submenu && !item.elink && (item.link && item.link.indexOf('http') != -1)"  title="{{item.text}}"
                    (click)="openWin(item.link)" >
                    <span class="float-right" *ngIf="item.alert" [ngClass]="item.label || 'badge badge-success'">{{item.alert}}</span>
                    <span class="span-class">{{item.text}}</span>
                </a>

                <!-- has submenu -->
                <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="!item.heading && item.submenu" title="{{item.text}}"
                    (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                        <span class="float-right" *ngIf="item.alert" [ngClass]="item.label || 'badge badge-success'">{{item.alert}}</span>
                         <!--  <em class="{{item.icon}}" *ngIf="item.icon"></em>-->
                        <span class="span-class">{{item.text}}</span><i class="icon-arrow-down"></i>
                </a>
                <!-- SUBLEVEL -->
                <ul *ngIf="item.submenu" class="sidebar-nav sidebar-subnav" [routerLinkActive]="['opening']">
                    <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" class="sidebar-subnav-header">{{item.text}}</li>
                    <li (click)="changeClass($event,index)" style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let subitem of item.submenu' [routerLinkActive]="['active']">
                        <!-- sublevel: external links -->
                        <a style="margin-left:0px;color: #fff;" href *ngIf="!subitem.heading && !subitem.submenu && subitem.elink" [attr.target]="subitem.target" [attr.href]="subitem.elink" title="{{subitem.text}}">
                            <span class="float-right" *ngIf="subitem.alert" [ngClass]="subitem.label || 'badge badge-success'">{{subitem.alert}}</span>
                            <span class="span-class" style="margin-left: -20px;">{{ subitem.text}}</span>
                        </a>
                        <!-- sublevel: single menu item  -->
                        <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="!subitem.submenu && !subitem.elink && !(subitem.link && subitem.link.indexOf('http') != -1)" [routerLink]="subitem.link" [attr.route]="subitem.link" title="{{subitem.text}}">
                            <span class="float-right" *ngIf="subitem.alert" [ngClass]="subitem.label || 'badge badge-success'">{{subitem.alert}}</span>
                            <span class="span-class" style="margin-left: -20px;">{{ subitem.text}}</span>
                        </a>

                        <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngIf="!subitem.submenu && !subitem.elink && (subitem.link && subitem.link.indexOf('http') != -1)" [routerLink]="subitem.link" [attr.route]="subitem.link" title="{{subitem.text}}"
                        (click)="openWin(subitem.link)">
                            <span class="float-right" *ngIf="subitem.alert" [ngClass]="subitem.label || 'badge badge-success'">{{subitem.alert}}</span>
                            <span class="span-class" style="margin-left: -20px;">{{ subitem.text}}</span>
                        </a>

                       
                        <!-- sublevel: has submenu -->
                        <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="subitem.submenu" title="{{subitem.text}}"
                            (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                                <span class="float-right" *ngIf="subitem.alert" [ngClass]="subitem.label || 'badge badge-success'">{{subitem.alert}}</span>
                                <span class="span-class" style="margin-left: -20px;">{{ subitem.text}}</span>
                        </a>
                        <!-- SUBLEVEL 2 -->
                        <ul *ngIf="subitem.submenu" class="sidebar-nav sidebar-subnav level2" [routerLinkActive]="['opening']">
                            <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let subitem2 of subitem.submenu' [routerLinkActive]="['active']">
                                <!-- sublevel 2: single menu item  -->
                                <a style="margin-left:0px;color: #fff;" href *ngIf="!subitem2.submenu" [routerLink]="subitem2.link" [attr.route]="subitem2.link" title="{{subitem2.text}}">
                                    <span class="float-right" *ngIf="subitem2.alert" [ngClass]="subitem2.label || 'badge badge-success'">{{subitem2.alert}}</span>
                                    <em class="{{subitem2.icon}}" *ngIf="subitem2.icon"></em>
                                    <span class="span-class">{{subitem2.text}}</span>
                                </a>
                                <!-- sublevel2: has submenu -->
                                <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="subitem2.submenu" title="{{subitem2.text}}"
                                    (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                                        <span class="float-right" *ngIf="subitem2.alert" [ngClass]="subitem2.label || 'badge badge-success'">{{subitem2.alert}}</span>
                                        <em class="{{subitem2.icon}}" *ngIf="subitem2.icon"></em>
                                        <span class="span-class">{{subitem2.text}}</span>
                                </a>
                                <!-- SUBLEVEL 3 -->
                                <ul *ngIf="subitem2.submenu" class="sidebar-nav sidebar-subnav level3" [routerLinkActive]="['opening']">
                                    <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let subitem3 of subitem2.submenu' [routerLinkActive]="['active']">
                                        <!-- sublevel 2: single menu item  -->
                                        <a style="margin-left:0px;" href *ngIf="!subitem3.submenu" [routerLink]="subitem3.link" [attr.route]="subitem3.link" title="{{subitem3.text}}">
                                            <span class="float-right" *ngIf="subitem3.alert" [ngClass]="subitem3.label || 'badge badge-success'">{{subitem3.alert}}</span>
                                            <em class="{{subitem3.icon}}" *ngIf="subitem3.icon"></em>
                                            <span class="span-class">{{ subitem3.text}}</span>
                                        </a>
                                        <!-- sublevel3: has submenu -->
                                        <a style="margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" href *ngIf="subitem3.submenu" title="{{subitem3.text}}"
                                            (click)="toggleSubmenuClick($event,index)" (mouseenter)="toggleSubmenuHover($event)">
                                                <span class="float-right" *ngIf="subitem3.alert" [ngClass]="subitem3.label || 'badge badge-success'">{{subitem3.alert}}</span>
                                                <em class="{{subitem3.icon}}" *ngIf="subitem3.icon"></em>
                                                <span class="span-class">{{ subitem3.text}}</span>
                                        </a>
                                        <!-- SUBLEVEL 4 -->
                                        <ul *ngIf="subitem3.submenu" class="sidebar-nav sidebar-subnav level3" [routerLinkActive]="['opening']">
                                            <li style="padding-top:10px;margin-left:0px;color: hsla(0,0%,100%,.65);background: #1479cc;" *ngFor='let subitem4 of subitem3.submenu' [routerLinkActive]="['active']">
                                                <!-- sublevel 2: single menu item  -->
                                                <a style="margin-left:0px;" href *ngIf="!subitem4.submenu" [routerLink]="subitem4.link" [attr.route]="subitem4.link" title="{{subitem4.text}}">
                                                    <span class="float-right" *ngIf="subitem4.alert" [ngClass]="subitem4.label || 'badge badge-success'">{{subitem4.alert}}</span>
                                                    <em class="{{subitem4.icon}}" *ngIf="subitem4.icon"></em>
                                                    <span class="span-class">{{ subitem4.text}}</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            <li>
                        </ul>
                    <li>
                </ul>
            </li>

        </ul>
        <!-- END sidebar nav-->

    </nav>
</div>
<!-- END Sidebar (left)-->
