From aa35725823513928593f0a2e0b332277cf5c1cdb Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Fri, 6 Nov 2020 11:00:19 +0200
Subject: [PATCH] Fixes profile/login menu on mobile mode

---
 .../src/app/ui/navbar/navbar.component.html   | 20 ++++++++++++-------
 .../src/app/ui/navbar/navbar.component.ts     |  6 +++---
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html
index d1581031c..9d8cab229 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.html
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html
@@ -8,9 +8,14 @@
 				<div class="icon-bar3"></div>
 			</div>
 			<a class="logo" [routerLink]="['home']"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
-			<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
+
+			<div class="navbar-toggler ml-auto" *ngIf="isAuthenticated();else loginoption">
+				<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" [matMenuTriggerFor]="toggleMenu" [matTooltip]="this.getPrincipalName()">
+			</div>
+			<!-- <button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
 				<mat-icon class="toggle-icon">view_headline</mat-icon>
-			</button>
+			</button> -->
+
 			<div class="collapse navbar-collapse justify-content-end" id="navigation">
 
 				<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
@@ -44,12 +49,13 @@
 			</div>
 
 			<mat-menu #toggleMenu="matMenu">
-				<div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()">
+				<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()">
+						<!-- <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()"> -->
 							<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
-						</li>
+						<!-- </li> -->
 						<ng-template #loginoption>
 							<li class="d-flex justify-content-center avatar">
 								<button mat-button [routerLink]=" ['/login'] " class="d-flex justify-content-center">
@@ -59,7 +65,7 @@
 						</ng-template>
 						<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
 							<a class="faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
-							<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang">
+							<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang" (click)="$event.stopPropagation();">
 								<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
 								<mat-icon>arrow_drop_down</mat-icon>
 							</button>
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
index 3462306ce..2f68bfbbf 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
@@ -37,7 +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;
+	@ViewChild(MatMenuTrigger, { static: false }) trigger: MatMenuTrigger;
 
 	constructor(location: Location,
 		private element: ElementRef,
@@ -86,11 +86,11 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 
 	openMyMenu() {
 		this.trigger.openMenu();
-	} 
+	}
 
 	closeMyMenu() {
 		this.trigger.closeMenu();
-	} 
+	}
 
 	sidebarOpen() {
 		const toggleButton = this.toggleButton;