From cb0ac1b9df603601970a766ce7a6c07b2e0faff6 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 9 Mar 2022 23:38:05 +0200
Subject: [PATCH] Navbar make menu position center default. Fix menuitems
 subnav

---
 sharedComponents/navigationBar.component.html | 136 +++++++++---------
 1 file changed, 69 insertions(+), 67 deletions(-)

diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html
index b4f0da3f..3dd8f748 100644
--- a/sharedComponents/navigationBar.component.html
+++ b/sharedComponents/navigationBar.component.html
@@ -2,8 +2,10 @@
   <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')"
+        <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">
@@ -39,13 +41,15 @@
                   <!--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>
+                     [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>
+                    && 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)"
@@ -90,10 +94,13 @@
   </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"
+         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')"
+      <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>
@@ -107,7 +114,7 @@
             <ng-container *ngIf="showLogo && !isHeaderLeft">
               <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
             </ng-container>
-            <ng-container *ngIf="header.menuPosition === 'center'">
+            <ng-container *ngIf="!header.menuPosition || header.menuPosition === 'center'">
               <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
             </ng-container>
           </div>
@@ -136,44 +143,39 @@
                   <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)) "
-                     class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
-                  <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
-                       style="top: 80px; left: 0px;" id="{{menu.rootItem._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 *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
+                  <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>
+                              [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>
+                          <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 -->
@@ -231,33 +233,33 @@
             </ul>
           </ng-template>
         </ng-container>
-        </nav>
+      </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>
+    <!-- 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">