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

<aside id="sidebar_main">
  <div id="sidebar_content">
    <div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top">
      <div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div>
      <ul class="uk-list uk-nav-parent-icon" uk-nav>
        <ng-template ngFor [ngForOf]="items" let-item let-i="index">
          <li [class.uk-active]="isTheActiveMenuItem(item)"
              [class.uk-open]="isTheActiveMenuItem(item)"
              [class.uk-parent]="item.items.length > 1">
            <a *ngIf="item.items.length <= 1" [routerLink]="(item.route)?item.route:null"
               [title]="item.title"
               [queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
              <div class="uk-flex uk-flex-middle uk-flex-center">
                <div *ngIf="item.icon" class="uk-width-auto">
                  <icon class="menu-icon" [svg]="item.icon" [flex]="true"></icon>
                </div>
                <span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{item.title}}</span>
              </div>
            </a>
          </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"
               [queryParamsHandling]="queryParamsHandling" class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
              <span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
              <span [ngClass]="specialMenuItem.customClass" class="uk-text-center"
                    [class.uk-margin-small-left]="open" [class.uk-margin-small-top]="!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>