From 770fb685a85454f5b7c2490f693c97cdb9e78fee Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Wed, 5 Jun 2019 10:19:28 +0300
Subject: [PATCH] Adds: Logout on sidebar mobile mode

---
 .../src/app/ui/sidebar/sidebar.component.html | 20 ++++++++++++-----
 .../src/app/ui/sidebar/sidebar.component.scss | 22 +++++++++++++------
 .../src/app/ui/sidebar/sidebar.component.ts   | 11 +++++++++-
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
index e88e9bf8a..174b2926b 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
@@ -29,15 +29,21 @@
 			<li class="nav-item">
 				<a class="nav-link" *ngIf="isAuthenticated();else loginoption">
 					<p style="display: flex; align-items: center;" [routerLink]=" ['/profile']">
-						<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()">
+						<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()"
+							[src]="this.getPrincipalAvatar()">
 						<span class="d-lg-none d-md-block">{{ 'SIDE-BAR.ACCOUNT' | translate }}</span>
 					</p>
 				</a>
+				<a class="nav-link" *ngIf="isAuthenticated()" (click)="logout()">
+					<i class="material-icons">exit_to_app</i>
+					<p class="login-label">{{ 'USER-DIALOG.LOG-OUT' | translate }}</p>
+				</a>
 			</li>
 			<ng-template #loginoption>
-				<button mat-button [routerLink]=" ['/login'] ">
-					<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
-				</button>
+				<a class="nav-link login" [routerLink]=" ['/login'] ">
+					<i class="material-icons">vpn_key</i>
+					<p class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</p>
+				</a>
 			</ng-template>
 		</ul>
 	</div>
@@ -45,12 +51,14 @@
 	<!-- END OF MOBILE MENU -->
 
 	<!-- Sidebar Menu -->
-	<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst" [class.nav-list-item]="(isAuthenticated() || !groupMenuItem.requiresAuthentication)">
+	<ul class="nav" *ngFor="let groupMenuItem of groupMenuItems; last as isLast; first as isFirst"
+		[class.nav-list-item]="(isAuthenticated() || !groupMenuItem.requiresAuthentication)">
 		<div *ngIf="showItem(groupMenuItem);">
 			<div class="sidebarSubtitle">
 				<p>{{groupMenuItem.title | translate}}</p>
 			</div>
-			<li routerLinkActive="active" *ngFor="let groupMenuRoute of groupMenuItem.routes" class="{{groupMenuRoute.class}} nav-item">
+			<li routerLinkActive="active" *ngFor="let groupMenuRoute of groupMenuItem.routes"
+				class="{{groupMenuRoute.class}} nav-item">
 				<a class="nav-link" [routerLink]="[groupMenuRoute.path]">
 					<i *ngIf="isFirst" class="material-icons">{{ groupMenuRoute.icon }}</i>
 					<i *ngIf="!isFirst" class="material-icons-outlined">{{ groupMenuRoute.icon }}</i>
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.scss b/dmp-frontend/src/app/ui/sidebar/sidebar.component.scss
index f175eeae5..515975a10 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.scss
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.scss
@@ -1,13 +1,21 @@
-$mat-card-header-size: 40px !default;
+$mat-card-header-size: 30px !default;
 
 .my-mat-card-avatar {
-	height: $mat-card-header-size;
-	width: $mat-card-header-size;
-	border-radius: 50%;
-	flex-shrink: 0;
-	margin-right: 7px;
+  height: $mat-card-header-size;
+  width: $mat-card-header-size;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-right: 7px;
 }
 
 .nav-list-item {
-	margin-top: 20px;
+  margin-top: 20px;
+}
+
+.login {
+  margin-top: 15px !important;
+}
+
+.login-label {
+  text-transform: uppercase;
 }
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
index 669db42f6..6b42cefec 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
@@ -53,7 +53,12 @@ export class SidebarComponent implements OnInit {
 	publicItems: GroupMenuItem;
 	groupMenuItems: GroupMenuItem[] = [];
 
-	constructor(public translate: TranslateService, private authentication: AuthService, private dialog: MatDialog) { }
+	constructor(
+		public translate: TranslateService,
+		private authentication: AuthService,
+		private dialog: MatDialog) {
+
+	}
 
 	ngOnInit() {
 		this.generalItems = {
@@ -122,6 +127,10 @@ export class SidebarComponent implements OnInit {
 		}
 	}
 
+	public logout(): void {
+		this.authentication.logout();
+	}
+
 	showItem(value: GroupMenuItem) {
 		if (value.requiresAdmin) {
 			return this.isAdmin();