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-xlarge-top">
      <ul class="uk-list">
        <ng-template ngFor [ngForOf]="items" let-item let-i="index">
          <li [class.uk-active]="isTheActiveMenuItem(item)"
              [class.act_section]="item.open"
              [class.submenu_trigger]="item.items.length > 1">
            <a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null"
               [queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center">
              <div *ngIf="item.icon && !open" class="uk-margin-auto">
                <span [innerHTML]="satinizeHTML(item.icon)"></span>
              </div>
             <!-- <div *ngIf="!item.icon && !open" class="uk-margin-auto"><i
                  class="material-icons">donut_large</i></div>-->
              <span [class.uk-text-small]="!open">{{item.title}}</span>
            </a>
            <ng-template [ngIf]="item.items.length > 1">
              <a (click)="item.open = !item.open">
                <div *ngIf="item.icon && !open" class="menu_icon "><i class="material-icons">{{item.icon}}</i></div>
                <span [class.uk-text-small]="!open">{{item.title}}</span>

              </a>
              <ul [class.uk-hidden]="!open">
                <ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
                  <li *ngIf="subItem.route" [class.uk-active]="isTheActiveMenuItem(item, subItem)">
                    <a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
                       [queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling">
                      <div *ngIf="subItem.icon"><i class="material-icons">{{subItem.icon}}</i></div>
                      <span>{{subItem.title}}</span>
                    </a>
                  </li>
                </ng-template>
              </ul>
            </ng-template>
          </li>
        </ng-template>
      </ul>
    </div>
    <ng-template [ngIf]="specialMenuItem">
      <div class="special_section uk-margin-large-top">
        <ul class="uk-list">
          <li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
            <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params" class="uk-text-center">
              <span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
              <span [ngClass]="specialMenuItem.customClass"
                    [class.uk-margin-small-left]="open"
                    [class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
            </a>
          </li>
        </ul>
      </div>
    </ng-template>
  </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>