Merge remote-tracking branch 'origin/ui-redesign' into ui-redesign

dmp-frontend/src/app/ui/navbar/navbar.component.html

@@ -8,7 +8,7 @@
 				<div class="icon-bar3"></div>
 			</div>
 			<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
-			<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
+			<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
 				<mat-icon class="toggle-icon">view_headline</mat-icon>
 			</button>
 			<div class="collapse navbar-collapse justify-content-end" id="navigation">
@@ -44,7 +44,7 @@
 			</div>
 
 			<mat-menu #toggleMenu="matMenu">
-				<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
+				<div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()">
 					<ul class="list m-2">
 						<li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar">
 							<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">

dmp-frontend/src/app/ui/navbar/navbar.component.ts

@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
-import { Component, ElementRef, EventEmitter, OnInit, Output } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog, MatMenuTrigger } from '@angular/material';
 import { Router } from '@angular/router';
 import { AppRole } from '@app/core/common/enum/app-role';
 import { AuthService } from '@app/core/services/auth/auth.service';
@@ -37,6 +37,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 	selectedLanguage = 'en';
 	private user: UserListingModel;
 	@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
+	@ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger;
 
 	constructor(location: Location,
 		private element: ElementRef,
@@ -83,6 +84,14 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		return this.currentRoute === '/language-editor' || this.currentRoute === '/profile';
 	}
 
+	openMyMenu() {
+		this.trigger.openMenu();
+	} 
+
+	closeMyMenu() {
+		this.trigger.closeMenu();
+	} 
+
 	sidebarOpen() {
 		const toggleButton = this.toggleButton;
 		const body = document.getElementsByTagName('body')[0];