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)" [class.custom-external]="menu.rootItem.url.includes('http')"
                     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]="isTheActiveMenu(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)" [class.custom-external]="submenu.url.includes('http')"
                           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)" class="custom-external"
                                 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 id="main-menu" class="uk-visible@m">
    <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'" uk-sticky media="@m">
      <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: 65px; width: 65px; z-index: 1000">
      </div>
      <div class="uk-container uk-container-expand">
        <nav class="uk-navbar" 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'}}"
                       [class.custom-external]="menu.rootItem.url.includes('http')">{{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-navbar-dropdown-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]="isTheActiveMenu(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}}" [class.custom-external]="submenu.url.includes('http')"
                                 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}}" class="custom-external" 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" class="custom-external">
                        {{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]="isTheActiveMenu(submenu)">
                                    {{submenu.title}}
                                  </a>
                                  <!-- EXTERNAL CHILD -->
                                  <a *ngIf="submenu.type == 'external' && submenu.url"
                                     href="{{submenu.url}}"
                                     target="_blank" class="custom-external">
                                    {{submenu.title}}
                                  </a>
                                </li>
                              </ng-container>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ng-container>
                </ng-container>
              </ul>
            </ng-template>
          </ng-container>
        </nav>
      </div>
    </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]="isTheActiveMenu(item)">
                {{item.title}}
              </a>
              <!-- EXTERNAL -->
              <a *ngIf="item.type == 'external' && item.url"
                 href="{{item.url}}" class="custom-external"
                 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" [class.uk-margin-medium-left]="!mobile">
    <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
         [src]="!mobile?header.logoUrl:header.logoSmallUrl"
         [alt]="header.title">
    <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" [class.uk-margin-medium-left]="!mobile">
    <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
         [src]="!mobile?header.logoUrl:header.logoSmallUrl"
         [alt]="header.title">
    <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>