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

<div id="sidebar_main" uk-sticky="end: .sidebar_main_swipe;" [attr.offset]="offset" class="uk-visible@m">
  <div sidebar-content>
    <ng-container *ngTemplateOutlet="menu; context: {mobile: false}"></ng-container>
  </div>
</div>
<div class="uk-hidden@m">
  <div id="sidebar_offcanvas" #sidebar_offcanvas [attr.uk-offcanvas]="'overlay: true'">
    <div class="uk-offcanvas-bar uk-padding-remove">
      <nav class="uk-navbar uk-background-default" uk-sticky>
        <div class="uk-navbar-right">
          <button class="uk-navbar-toggle uk-icon uk-close" (click)="closeOffcanvas()">
            <icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
          </button>
        </div>
      </nav>
      <ng-container *ngTemplateOutlet="menu; context: {mobile: true}"></ng-container>
    </div>
  </div>
</div>
<ng-template #menu let-mobile=mobile>
  <div *ngIf="backItem" class="back" [class.mobile]="mobile">
    <a [routerLink]="backItem.route" [queryParams]="backItem.params" class="uk-flex uk-flex-middle uk-flex-center"
       (click)="closeOffcanvas()" [queryParamsHandling]="queryParamsHandling">
        <div *ngIf="backItem.icon" class="uk-width-auto">
          <icon [name]="backItem.icon.name" ratio="1.3" [svg]="backItem.icon.svg" [flex]="true"></icon>
        </div>
        <span class="uk-width-expand uk-text-truncate uk-margin-left"
              [class.hide-on-close]="backItem.icon">{{backItem.title}}</span>
    </a>
  </div>
  <div *ngIf="logoURL" id="sidebar_logo" class="uk-margin-top">
    <img [src]="logoURL">
  </div>
  <div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" [class.mobile]="mobile" style="min-height: 30vh">
    <ul #nav class="uk-list uk-nav" [class.uk-list-large]="mobile"
        [class.uk-nav-default]="!mobile" [class.uk-nav-primary]="mobile" uk-nav="duration: 400">
      <ng-template ngFor [ngForOf]="items" let-item>
        <li [class.uk-active]="item.isActive" [ngClass]="item.customClass"
            [class.uk-parent]="item.items.length > 0">
          <a [routerLink]="getItemRoute(item)" [title]="item.title" (click)="item.items.length === 0?closeOffcanvas():null"
             [queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null" class="uk-flex uk-flex-middle">
            <div *ngIf="item.icon && (item.icon.svg || item.icon.name)" class="uk-width-auto">
              <icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" [ratio]="item.icon.ratio?item.icon.ratio:0.9" [svg]="item.icon.svg" [flex]="true"></icon>
            </div>
            <span [class.hide-on-close]="item.icon" class="uk-width-expand@l uk-text-truncate uk-margin-small-left">{{item.title}}</span>
            <span *ngIf="item.items.length > 0" class="uk-nav-parent-icon hide-on-close"></span>
          </a>
          <ul *ngIf="item.items?.length > 0 && (isBrowser || item.isActive)" class="uk-nav-sub">
            <li *ngFor="let subItem of item.items" [ngClass]="subItem.customClass"
                [class.uk-active]="subItem.isActive">
              <a [routerLink]="subItem.route?subItem.route:null" [title]="subItem.title" (click)="closeOffcanvas()"
                 [queryParams]="subItem.route?subItem.params:null" [queryParamsHandling]="subItem.route?queryParamsHandling:null">
                <span class="uk-text-truncate">{{subItem.title}}</span></a>
            </li>
          </ul>
        </li>
      </ng-template>
    </ul>
  </div>
</ng-template>