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-large-top" style="min-height: 30vh">
      <ul #nav class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" uk-nav="duration: 400">
        <ng-template ngFor [ngForOf]="items" let-item>
          <li [class.uk-active]="isTheActiveMenuItem(item)"
              [class.uk-parent]="item.items.length > 0">
            <a [routerLink]="getItemRoute(item)" [title]="item.title"
               [queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null">
              <div class="uk-flex uk-flex-middle uk-flex-center">
                <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="0.9" [svg]="item.icon.svg" [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>
                <span *ngIf="item.items?.length > 0"></span>
              </div>
            </a>
            <ul *ngIf="item.items?.length > 0 && (isBrowser || isTheActiveMenuItem(item))" class="uk-nav-sub">
              <li *ngFor="let subItem of item.items"
                  [class.uk-active]="isTheActiveMenuItem(item, subItem)">
                <a [routerLink]="subItem.route?subItem.route:null" [queryParams]="subItem.route?subItem.params:null"
                   [queryParamsHandling]="subItem.route?queryParamsHandling:null" [title]="subItem.title">
                  <span class="uk-text-truncate">{{subItem.title}}</span></a>
              </li>
            </ul>
          </li>
        </ng-template>
      </ul>
    </div>
    <ng-template [ngIf]="specialMenuItem">
      <div class="menu_section uk-margin-xlarge-top">
        <ul class="uk-list uk-nav uk-nav-default" uk-nav>
          <li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
            <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
               [queryParamsHandling]="queryParamsHandling">
              <div class="uk-flex uk-flex-middle uk-flex-center">
                <div *ngIf="specialMenuItem.icon" class="uk-width-auto">
                  <icon class="menu-icon" [customClass]="specialMenuItem.icon.class"  [name]="specialMenuItem.icon.name" ratio="1.2" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
                </div>
                <span *ngIf="open || !specialMenuItem.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{specialMenuItem.title}}</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </ng-template>
  </div>
</aside>