<aside id="sidebar_main">
  <div *ngIf= "showHeader" class="sidebar_main_header">
    <div *ngIf="name" class="uk-padding-small">
      <div class="uk-text-bold">{{name}}</div>
      <div>Monitor Dashboard</div>
    </div>
    <div *ngIf="header" class="uk-padding-small">
      <img *ngIf="header.logoUrl" [src]="header.logoUrl">
      <div class="uk-text-bold uk-margin-top">{{header.name}}</div>
      <div>{{header.dashboard}}</div>
    </div>
  </div>
  <div class="menu_section uk-margin-top">
    <ul>
      <ng-template ngFor [ngForOf]="items" let-item let-i="index">
        <li [class.current_section]="isTheActiveMenu(item.route)"
            [class.act_section]="item.open"
            [title]="item.name"
            [class.submenu_trigger]="item.items.length > 1">
          <a *ngIf="item.items.length <= 1 && item.route" [routerLink]="item.route">
            <span *ngIf="item.icon" class="menu_icon"><i class="material-icons">{{item.icon}}</i></span>
            <span class="menu_title">{{item.name}}</span>
          </a>
          <ng-template [ngIf]="item.items.length > 1">
            <a (click)="item.open = !item.open">
              <span *ngIf="item.icon" class="menu_icon"><i class="material-icons">{{item.icon}}</i></span>
              <span class="menu_title">{{item.name}}</span>
            </a>
            <ul [style.display]="(item.open?'block':'none')">
              <ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
                <li *ngIf="subItem.route" [class.act_item]="isTheActiveMenu(subItem.route)">
                  <a [routerLink]="subItem.route">
                    <span *ngIf="subItem.icon" class="menu_icon"><i class="material-icons">{{subItem.icon}}</i></span>
                    <span class="menu_title">{{subItem.name}}</span>
                  </a>
                </li>
              </ng-template>
            </ul>
          </ng-template>
        </li>
      </ng-template>
    </ul>
  </div>
</aside>
