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

<aside id="sidebar_main"  >
  <div id="sidebar_content">
  <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>
    <div *ngIf="headerName" class="uk-disabled uk-text-muted uk-text-center">{{headerName}}</div>
  </a>
  <div *ngIf="items.length > 0" class="menu_section uk-margin-large-top">
    <ul class="uk-margin-large-top uk-list">
<!--      <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" [class.uk-margin]="!isTheActiveMenuItem(item)">
          <a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null"
             [queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center" [class.uk-text-bold]="isTheActiveMenuItem(item)">
            <div *ngIf="item.icon && !open" class="menu_icon uk-margin-auto">
              <span   [innerHTML]="satinizeHTML(item.icon)"></span>
            </div>
            <div *ngIf="!item.icon && !open" class="menu_icon uk-margin-auto"><i class="material-icons">donut_large</i></div>
            <span class="menu_title" [class.uk-text-small]="!open">{{item.title}}</span>
          </a>
          <ng-template [ngIf]="item.items.length > 1">
            <a (click)="item.open = !item.open"  class="uk-text-center">
              <div *ngIf="item.icon && !open" class="menu_icon "><i class="material-icons">{{item.icon}}</i></div>
              <span  class="menu_title  " [class.uk-text-small]="!open">{{item.title}}</span>

            </a>
            <ul [style.display]="(item.open?'block':'none')" class="uk-text-center">
              <ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
                <li *ngIf="subItem.route" [class.act_item]="isTheActiveMenuItem(item, subItem)" [class.current_section]="isTheActiveMenuItem(subItem)">
                  <a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
                     [queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling">
                    <div *ngIf="subItem.icon" class="menu_icon"><i class="material-icons">{{subItem.icon}}</i></div>
                    <span class="menu_title  ">{{subItem.title}}</span>
                  </a>
                </li>
              </ng-template>
            </ul>
          </ng-template>
        </li>
      </ng-template>
    </ul>
    <ng-template [ngIf]="specialMenuItem">
       <ul class="searchLink uk-margin-large-top  uk-list">
        <li [class.current_section]="isTheActiveUrl(specialMenuItem.route)" [title]="specialMenuItem.title"
            [class.uk-margin]="!isTheActiveUrl(specialMenuItem.route)" >
          <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"  class="uk-text-center">
            <span class="menu_icon uk-margin-small-right "  [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
            <span class="menu_title"
                  [class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
          </a>
        </li>
      </ul>
    </ng-template>
  </div>
 </div>
  <div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable "
       (click)="toggleOpen($event)"  >
    <span  class="uk-position-center"  *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5"  ></span>
    <span   class="uk-position-center"  *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
  </div>
</aside>