openaire-library/sharedComponents/navigationBar.component.html

<div *ngIf="showMenu">
  <div class="uk-hidden@m">
    <div [ngClass]="portal + '-menu'">
      <nav class="uk-navbar-container uk-navbar" uk-navbar="">
        <div
            *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo  && header.badge">
          <img class="uk-position-top-left"
               [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
               alt="BETA" style="height: 60px; width: 60px;">
        </div>
        <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left">
          <a *ngIf="!offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;">
            <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
            <span class="visually-hidden">toggle menu</span>
          </a>
        </div>
        <div class="uk-navbar-center">
          <ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
        </div>
        <div *ngIf="!onlyTop || userMenu" class="uk-navbar-right">
          <a *ngIf="offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;">
            <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
          </a>
        </div>
      </nav>
    </div>
    <div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
         class="uk-offcanvas uk-hidden@m"
         style="z-index:9999;">
      <div class="uk-offcanvas-bar">
        <button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
        <div class="uk-padding">
          <ul class="uk-nav uk-nav-default">
            <ng-container *ngIf="!onlyTop">
              <ng-container *ngFor="let menu of menuItems">
                <li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
                  <a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
                </li>
                <li [class.uk-active]="isTheActiveMenu(menu)"
                    *ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
                  <!--a routerLink="{{menu.rootItem.route}}"  [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
                  <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired)"
                     routerLink="{{menu.rootItem.route}}" (click)="closeCanvas(canvas)"
                     [queryParams]="menu.rootItem.params"
                     [fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
                  <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
                     href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)"
                     target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a>
                  <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) ||
                    (menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage)
                    && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))"
                     (click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a>
                  <ul class="uk-nav-sub">
                    <ng-container *ngFor="let submenu of menu.items">
                      <li [class.uk-active]="isTheActiveMenuItem(submenu)"
                          *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)  && (submenu.route.length > 0 || submenu.url.length > 0)"
                          [class.uk-parent]="submenu.items && submenu.items.length > 0">
                        <a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)"
                           routerLink="{{submenu.route}}" [queryParams]=submenu.params
                           [fragment]="submenu.fragment">{{submenu.title}}</a>
                        <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
                           href="{{submenu.url}}" (click)="closeCanvas(canvas)"
                           target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
                        <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
                          <ng-container *ngFor="let subsubmenu of submenu.items">
                            <li>
                              <a *ngIf="subsubmenu.route.length > 0"
                                 routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
                                 [fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
                              <a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
                                 href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)"
                                 target="_blank">{{subsubmenu.title}}</a>
                            </li>
                          </ng-container>
                        </ul>
                      </li>
                      <li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
                          class="uk-nav-header">{{submenu.title}}</li>
                    </ng-container>
                  </ul>
                </li>
              </ng-container>
            </ng-container>
          </ul>
          <ng-container *ngIf="userMenu">
            <user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
                       [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
                       [logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
            <ng-content select="[extra-s]"></ng-content>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
  <div class="uk-visible@m">
    <div class="uk-navbar-transparent" [ngClass]="portal + '-menu'"
         uk-sticky="show-on-up: true" media="@m" cls-active="uk-active uk-navbar-sticky"
         cls-inactive="uk-navbar-transparent"
         [attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
      <div
          *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo  && header.badge">
        <img class="uk-position-top-left"
             [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
             alt="BETA" style="height: 100px; width: 100px; z-index: 1000">
      </div>
      <nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar>
        <ng-container *ngIf="!onlyTop">
          <div class="uk-navbar-left">
            <ng-container *ngIf="showLogo && isHeaderLeft">
              <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
            </ng-container>
          </div>
          <div class="uk-navbar-center">
            <ng-container *ngIf="showLogo && !isHeaderLeft">
              <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
            </ng-container>
            <ng-container *ngIf="!header.menuPosition || header.menuPosition === 'center'">
              <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
            </ng-container>
          </div>
          <div class="uk-navbar-right">
            <ng-container *ngIf="header.menuPosition === 'right'">
              <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
            </ng-container>
            <user-mini *ngIf="userMenu" [user]="user" [dark]="dark"
                       [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
                       [cookieDomain]=properties.cookieDomain></user-mini>
            <ng-content select="[extra-m]"></ng-content>
          </div>
          <ng-template #mainMenu>
            <ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
              <li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
                <a routerLink="/">Home</a>
              </li>
              <ng-container *ngFor="let menu of menuItems">
                <li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
                    *ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
                  <!--a routerLink="{{menu.rootItem.route}}"   [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
                  <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )"
                     routerLink="{{menu.rootItem.route}}"
                     [queryParams]="menu.rootItem.params"
                     [fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
                  <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
                     href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
                     aria-expanded="false">{{menu.rootItem.title}}</a>
                  <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a>
                  <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown" uk-drop="pos: bottom-left">
                    <div class="uk-height-max-medium uk-overflow-auto">
                      <ul class="uk-nav uk-navbar-dropdown-nav">
                        <ng-container *ngFor="let submenu of menu.items">
                          <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
                            isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
                            submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"
                              [class.uk-parent]="submenu.items && submenu.items.length > 0">
                            <a *ngIf="submenu.route.length > 0"
                               routerLink="{{submenu.route}}" [queryParams]="submenu.params"
                               [fragment]="submenu.fragment">{{submenu.title}}</a>
                            <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
                               href="{{submenu.url}}"
                               target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
                            <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
                              <ng-container *ngFor="let subsubmenu of submenu.items">
                                <li>
                                  <a *ngIf="subsubmenu.route.length > 0"
                                     routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
                                     [fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
                                  <a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
                                     href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
                                </li>
                              </ng-container>
                            </ul>

                          <li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
                              class="uk-nav-header">{{submenu.title}}</li>
                        </ng-container>
                      </ul>
                    </div>
                  </div>
                </li>
              </ng-container>
              <!-- Custom menu items -->
              <!-- TODO: Add to mobile menu as well! -->
              <ng-container *ngIf="additionalMenuItems?.length > 0 && properties.environment == 'development'">
                <ng-container *ngFor="let menu of additionalMenuItems">
                  <li class="uk-parent">
                    <!-- INTERNAL ROOT-->
                    <a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
                       routerLink="{{menu.route}}"
                       [queryParams]="menu.params"
                       [fragment]="menu.fragment">
                      {{menu.title}}
                    </a>
                    <!-- EXTERNAL ROOT-->
                    <a *ngIf="menu.type == 'external' && menu.url"
                       href="{{menu.url}}"
                       target="_blank">
                      {{menu.title}}
                    </a>
                    <!-- NO ACTION ROOT-->
                    <a *ngIf="menu.type == 'noAction'">
                      {{menu.title}}
                    </a>
                    <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
                         style="top: 80px; left: 0px;" id="{{menu._id}}" uk-toggle>
                      <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
                        <div class="uk-first-column uk-height-max-medium uk-overflow-auto">
                          <ul class="uk-nav uk-navbar-dropdown-nav">
                            <ng-container *ngFor="let submenu of menu.items">
                              <li>
                                <!-- INTERNAL CHILD -->
                                <a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
                                   routerLink="{{submenu.route}}"
                                   [queryParams]="submenu.params"
                                   [fragment]="submenu.fragment"
                                   [class.uk-active]="isTheActiveMenuItem(submenu)">
                                  {{submenu.title}}
                                </a>
                                <!-- EXTERNAL CHILD -->
                                <a *ngIf="submenu.type == 'external' && submenu.url"
                                   href="{{submenu.url}}"
                                   target="_blank">
                                  {{submenu.title}}
                                </a>
                              </li>
                            </ng-container>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ng-container>
              </ng-container>
            </ul>
          </ng-template>
        </ng-container>
      </nav>
    </div>
    <!-- New navbar for featured menu items - test only -->
    <ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'">
      <div class="featuredNavBar">
        <ul>
          <ng-container *ngFor="let item of featuredMenuItems">
            <li>
              <!-- INTERNAL -->
              <a *ngIf="item.type == 'internal' && item.route && isEnabled([item.route], showPage)"
                 routerLink="{{item.route}}"
                 [queryParams]="item.params"
                 [fragment]="item.fragment"
                 [class.uk-active]="isTheActiveMenuItem(item)">
                {{item.title}}
              </a>
              <!-- EXTERNAL -->
              <a *ngIf="item.type == 'external' && item.url"
                 href="{{item.url}}"
                 target="_blank">
                {{item.title}}
              </a>
            </li>
          </ng-container>
        </ul>
      </div>
    </ng-container>
  </div>
</div>
<ng-template #header_template let-mobile="mobile">
  <a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="!isHeaderLeft"
     class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
    <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
         [src]="!mobile?header.logoUrl:header.logoSmallUrl"
         [alt]="header.title"
         class="uk-width-1-1">
    <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
      <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
        <p class="uk-margin-remove">{{header.title}}</p>
      </div>
    </ng-container>
  </a>
  <a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft"
     class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
    <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
         [src]="!mobile?header.logoUrl:header.logoSmallUrl"
         [alt]="header.title"
         class="uk-width-1-1">
    <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
      <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
        <p class="uk-margin-remove">{{header.title}}</p>
      </div>
    </ng-container>
  </a>
</ng-template>