openaire-library/dashboard/sharedComponents/sidebar/sideBar.component.html

<aside id="sidebar_main">
  <a *ngIf= "showHeader" class="sidebar_main_header uk-text-center" [href]="headerUrl"
     [class.uk-disabled]="(!headerUrl)">
    <img  *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
          [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
          [alt]="properties.environment">
    <img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl">
    <div *ngIf="!headerLogoUrl" class="portalLogo logo" ></div>
  </a>
  <div *ngIf="items.length > 0" class="menu_section uk-margin-top">
    <ul>
      <li *ngIf="headerName"><a
        class="uk-disabled"><span class="menu_title uk-text-muted uk-text-uppercase">{{headerName}}</span></a></li>
      <ng-template ngFor [ngForOf]="items" let-item let-i="index">
        <li [class.current_section]="isTheActiveMenuItem(item)"
            [class.act_section]="item.open"
            [title]="item.title"
            [class.submenu_trigger]="item.items.length > 1">
          <a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null" [queryParams]=item.params>
            <span *ngIf="item.icon" class="menu_icon">
              <span   [innerHTML]="satinizeHTML(item.icon)"></span>
            </span>
            <span *ngIf="!item.icon" class="menu_icon"><i class="material-icons">donut_large</i></span>
            <span class="menu_title">{{item.title}}</span>
            <div class="menu_mini_title">{{item.title}}</div>
          </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.title}}</span>
              <div class="menu_mini_title">{{item.title}}</div>
            </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]="isTheActiveMenuItem(item, subItem)">
                  <a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null" [queryParams]=subItem.params>
                    <span *ngIf="subItem.icon" class="menu_icon"><i class="material-icons">{{subItem.icon}}</i></span>
                    <span class="menu_title">{{subItem.title}}</span>
                  </a>
                </li>
              </ng-template>
            </ul>
          </ng-template>
        </li>
      </ng-template>
    </ul>
    <ng-template [ngIf]="searchLink">
       <ul class="searchLink">
        <li [class.current_section]="isTheActiveUrl(searchLink)" title="Search for Research Results" >
          <a [routerLink]="searchLink" [queryParams]="searchParams">
            <span class="menu_icon"><i class="material-icons">search</i></span>
            <span class="menu_title">Search for Research Results</span>
            <div class="menu_mini_title">Search</div>
          </a>
        </li>
      </ul>
    </ng-template>
  </div>
</aside>