From 42e0f4673bf67dbc2c830dab0d69a8aaf795dc4d Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 11 Jan 2021 14:14:44 +0000
Subject: [PATCH] [Library|Trunk] Navbar: uk-toogle to close usermenu: add
 active menu link

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60206 d315682c-612b-4755-9ff5-7f18f6832af3
---
 login/userMini.component.ts                   | 20 ++++++++++---------
 sharedComponents/navigationBar.component.html |  2 +-
 sharedComponents/navigationBar.component.ts   |  5 -----
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/login/userMini.component.ts b/login/userMini.component.ts
index 944156bc..05317ab5 100644
--- a/login/userMini.component.ts
+++ b/login/userMini.component.ts
@@ -5,6 +5,7 @@ import {RouterHelper} from '../utils/routerHelper.class';
 import {StringUtils} from '../utils/string-utils.class';
 import {properties} from "../../../environments/environment";
 import {Subscriber} from "rxjs";
+import {MenuItem} from "../sharedComponents/menu";
 
 // declare var logoutClicked;
 @Component({
@@ -28,7 +29,7 @@ import {Subscriber} from "rxjs";
               </svg>
             </svg>
           </a>
-          <a *ngIf="!loggedIn" class="loginLink" (click)="logIn()">Sign in <span
+          <a *ngIf="!loggedIn" class="loginLink" id="userMenu-parent" (click)="logIn()">Sign in <span
               class=" uk-margin-small-left uk-margin-small-right uk-icon"><svg width="20" height="20"
                                                                                viewBox="0 0 20 20"
                                                                                xmlns="http://www.w3.org/2000/svg"
@@ -42,8 +43,7 @@ import {Subscriber} from "rxjs";
           </a>
 
 
-          <div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu"
-               (click)="onClick('userMenu')">
+          <div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu" 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">
@@ -51,7 +51,7 @@ import {Subscriber} from "rxjs";
                   <li><a   routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
                   <li *ngIf="isAuthorized"><a   routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
                   <ng-container *ngFor="let item of userMenuItems ">
-                    <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
+                    <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [class.uk-active]="isTheActiveSubMenu(item)">
                       <a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
                          [queryParams]=item.params>{{item.title}}</a>
                       <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
@@ -259,12 +259,14 @@ export class UserMiniComponent implements OnInit, OnChanges {
       this.fixRedirectUrl ? (properties.baseLink + this.fixRedirectUrl) : this.redirectUrl, this.search);
     window.location.href = this.logInUrl;
   }
-  
-  onClick(id: string) {
-    let el: HTMLElement = document.getElementById(id);
-    el.setAttribute('uk-toggle', 'true');
+
+  isTheActiveSubMenu(menuItem: MenuItem): boolean {
+    let currentRoute = this.router.url.split('?')[0];
+    if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) {
+      return true;
+    }
+    return false;
   }
-  
   parseName() {
     this.firstLetters = "";
     if (this.user && this.user.firstname) {
diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html
index 2bd58a8b..8e337254 100644
--- a/sharedComponents/navigationBar.component.html
+++ b/sharedComponents/navigationBar.component.html
@@ -213,7 +213,7 @@
 
 
                   <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
-                       style="top: 80px; left: 0px;" id="{{menu.rootItem.id}}">
+                       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">
diff --git a/sharedComponents/navigationBar.component.ts b/sharedComponents/navigationBar.component.ts
index b69fad10..736207dd 100644
--- a/sharedComponents/navigationBar.component.ts
+++ b/sharedComponents/navigationBar.component.ts
@@ -121,11 +121,6 @@ export class NavigationBarComponent implements OnInit, OnDestroy{
     }
   }
 
-  onClick(id: string) {
-    var el: HTMLElement = document.getElementById(id);
-    // el.classList.remove('uk-open');
-    el.setAttribute('uk-toggle', 'true');
-  }
 
   isEnabled(required, enabled) {
     if (!required) {