<aside class="main-sidebar sidebar-dark-primary elevation-4 ">
  <a class="brand-link" >
    <span class="brand-text font-weight-light">{{ 'ApplicationName' | translate }}</span>
    <i class="fas fa-bars ml-3 fa-1x" data-widget="pushmenu"></i>
  </a>
  <a class="nav-link"  style="color: #ffffff;"
  ></a>


  <div class="sidebar" id="sidebar">
    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
      <div class="image">
        <img
          src="assets/images/default-150x150.png"
          class="img-circle elevation-2"
          alt="User Image"
        />
      </div>
    </div>

    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        <li class="nav-item"  routerLinkActive="active" *ngFor="let menu of singleMenus"
            [ngClass]="{'active': menu.active ,
             'sidebar-dropdown':menu.type === 'single'} ">
          <a class="nav-link"  [routerLink]="[ menu.link ]" (click)='toggle(menu)'>
            <i class="nav-icon {{menu.icon}} mr-2"></i>
            <p>{{menu.title | translate}}</p>
          </a>
        </li>

        <li *ngFor="let menu of dropDownMenus" class="ml-1"
            [ngClass]="{'active': menu.active ,
             'sidebar-dropdown':menu.type === 'dropdown'} ">
          <a class="nav-link" (click)='toggle(menu)' href="javascript:;">
            <i class="nav-icon {{menu.icon}} mr-2"></i>

            <p>{{menu.title | translate}}</p>
          </a>
          <div [@slide]="getState(menu)" class="sidebar-submenu">
            <ul>
              <li routerLinkActive="active" *ngFor="let submenu of menu.subMenus">
                <a class="nav-link"  [routerLink]="submenu.link"> {{submenu.title |translate}}
                </a>
              </li>
            </ul>
          </div>
        </li>

      </ul>

    </nav>
  </div>
</aside>
