From d73965cb0a3ab14ab09e327932e912b4f3eea20c Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Tue, 17 Sep 2024 12:55:19 +0300
Subject: [PATCH] fix sidebar lists, fix navbar duplicate user menut toggle
 button, change top navbar behavior on small screen size, add title to user
 guide

---
 .../src/app/ui/navbar/navbar.component.html   | 17 +---
 .../sidebar-footer.component.css              |  4 +
 .../sidebar-footer.component.html             | 18 ++--
 .../src/app/ui/sidebar/sidebar.component.html | 82 +++++++++----------
 .../src/app/ui/sidebar/sidebar.component.scss |  3 -
 .../dialog/user-guide-dialog.component.html   |  2 +-
 .../user-guide-content.component.html         |  5 ++
 .../user-guide-content.component.scss         | 17 ++--
 .../user-guide-content.component.ts           |  4 +-
 9 files changed, 74 insertions(+), 78 deletions(-)

diff --git a/frontend/src/app/ui/navbar/navbar.component.html b/frontend/src/app/ui/navbar/navbar.component.html
index 2c777c8bd..7886d230d 100644
--- a/frontend/src/app/ui/navbar/navbar.component.html
+++ b/frontend/src/app/ui/navbar/navbar.component.html
@@ -15,15 +15,9 @@
 
 			<ul class="horizontal-list justify-content-end" id="navigation">
                 <li class="navbar-item-sm ml-auto">
-                        @if(this.isAuthenticated() && !onInvalidUrl()){
-                            <button type="button" [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
-                                <img alt="round user avatar image" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
-                            </button>
-                        }@else{
-                            <button mat-icon-button [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
-                                <mat-icon>more_horiz</mat-icon>
-                            </button>
-                        }
+                    <button mat-icon-button [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
+                        <mat-icon>more_horiz</mat-icon>
+                    </button>
                 </li>
 
 				<li class="new-plan-dialog col-md-auto ml-auto navbar-item-lg">
@@ -78,7 +72,7 @@
 
 			<mat-menu #toggleMenu="matMenu">
                 <ul class="list m-2">       
-                    <li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
+                    <li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0">
                         <button mat-button class="faq-title" (click)="openFaqDialog()" aria-label="faq">{{ 'FAQ.TITLE' | translate }}</button>
                         <button mat-button [matMenuTriggerFor]="languageMenu" class="lang" aria-label="language select" (click)="$event.stopPropagation();">
                             <mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
@@ -100,9 +94,6 @@
                     <li class="d-flex justify-content-center">
                         <button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
                     </li>
-                    <li *ngIf="isAuthenticated()" class="d-flex justify-content-center">
-                        <button type="button" mat-button class="rounded-btn neutral" (click)="logout()">{{ 'USER-DIALOG.LOG-OUT' | translate }}</button>
-                    </li>
                 </ul>
 			</mat-menu>
 		</div>
diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
index d5d41797e..1615386c4 100644
--- a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
+++ b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
@@ -19,6 +19,10 @@
 	color: var(--primary-color-3);
 }
 
+.sidebar-footer .option:focus {
+	color: var(--primary-color-3);
+}
+
 .sidebar-footer .vl {
 	border-right: 1px solid #d4d4d4;
 	color: white;
diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
index c270d8ade..b53951edd 100644
--- a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
+++ b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
@@ -1,9 +1,13 @@
 <div class="sidebar-footer col-12">
-
-	<div *ngFor="let footerItems of nestedFooterItems" class="row ml-2">
-		<div *ngFor="let item of footerItems; let index = index;" class="col-auto" [ngClass]="{'ml-3': index%2==1}" tabindex="0">
-			<p class="option" [ngClass]="{'option-active': this.router.url === item.routerPath}" [routerLink]="routerUtils.generateUrl(item.routerPath)">
-				{{ item.title | translate}}</p>
-		</div>
-	</div>
+    @for(footerItems of nestedFooterItems; track footerItems){
+        <ul class="row horizontal-list">
+            @for(item of footerItems; track item; let index=$index){
+                <li class="col-auto option" [ngClass]="{'option-active': this.router.url === item.routerPath, 'ml-3': index%2==1}" tabindex="0">
+                    <span  [routerLink]="routerUtils.generateUrl(item.routerPath)">
+                        {{ item.title | translate}}
+                    </span>
+                </li>
+            }
+        </ul>
+    }
 </div>
diff --git a/frontend/src/app/ui/sidebar/sidebar.component.html b/frontend/src/app/ui/sidebar/sidebar.component.html
index 3aef5e1d1..4dc7a74bb 100644
--- a/frontend/src/app/ui/sidebar/sidebar.component.html
+++ b/frontend/src/app/ui/sidebar/sidebar.component.html
@@ -1,47 +1,47 @@
 <div class="sidebar-wrapper">
 
 	<mat-list class="nav mat-list" *ngFor="let groupMenuItem of groupMenuItems; let firstGroup = first; let i = index" [class.nav-list-item]="showItem(groupMenuItem)" [class.nav-list-item-hidden]="!showItem(groupMenuItem)" [ngClass]="{'flex-grow-1': i == groupMenuItems.length - 2}">
-		<div *ngIf="showItem(groupMenuItem);">
-			<hr *ngIf="!firstGroup">
-			<mat-list-item routerLinkActive="active" [isActiveMatchOptions]="{ paths: 'exact', queryParams: 'ignored' }" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}">
-				<ng-container *ngIf="groupMenuRoute.routeType == routeType.System; else infoItems">
-					
-					<a class="new-plan nav-link nav-row" *ngIf="groupMenuRoute.path !== '/descriptions'; else description" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]"  [ngClass]="{'plan-tour': groupMenuRoute.path == '/plans'}">
-						<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
-						<i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask">person</i>
-						<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
-					</a>
-					
-					<ng-template #description>
-						<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
-							<span class="mb-3 inner-line"></span>
-							<div class="pl-0 pt-1 pb-1 container-fluid nav-subrow description-tour">
-								<i class="mb-1 material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
-								<i class="mb-1 material-symbols-outlined icon-mask">person</i>
-								<span class="pl-0 mt-1" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
-							</div>
-						</a>
-					</ng-template>
-				</ng-container>
-
-				<ng-template #infoItems>
-
-					<ng-container *ngIf="groupMenuRoute.path && groupMenuRoute.path != ''; else externalLink">
-						<a class="nav-link nav-row" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
-							<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
-							<span>{{groupMenuRoute.title | translate}}</span>
-						</a>						
-					</ng-container>
-
-					<ng-template #externalLink>
-						<a class="nav-link nav-row" *ngIf="groupMenuRoute.externalUrl && groupMenuRoute.externalUrl!=''" href="{{groupMenuRoute.externalUrl}}" target="_blank">
-							<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
-							<span>{{groupMenuRoute.title | translate}} <span class="material-symbols-outlined icon-external">open_in_new</span></span>
-						</a>		
-					</ng-template>
-				</ng-template>
-			</mat-list-item>
-		</div>
+		@if(showItem(groupMenuItem)){
+            <mat-list-item routerLinkActive="active" [isActiveMatchOptions]="{ paths: 'exact', queryParams: 'ignored' }" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}">
+                <hr *ngIf="first && !firstGroup">
+                <ng-container *ngIf="groupMenuRoute.routeType == routeType.System; else infoItems">
+                    
+                    <a class="new-plan nav-link nav-row" *ngIf="groupMenuRoute.path !== '/descriptions'; else description" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]"  [ngClass]="{'plan-tour': groupMenuRoute.path == '/plans'}">
+                        <i class="material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
+                        <i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask" aria-hidden>person</i>
+                        <span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
+                    </a>
+                    
+                    <ng-template #description>
+                        <a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
+                            <span class="mb-3 inner-line"></span>
+                            <div class="pl-0 pt-1 pb-1 container-fluid nav-subrow description-tour">
+                                <i class="mb-1 material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
+                                <i class="mb-1 material-symbols-outlined icon-mask" aria-hidden>person</i>
+                                <span class="pl-0 mt-1" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
+                            </div>
+                        </a>
+                    </ng-template>
+                </ng-container>
+    
+                <ng-template #infoItems>
+    
+                    <ng-container *ngIf="groupMenuRoute.path && groupMenuRoute.path != ''; else externalLink">
+                        <a class="nav-link nav-row" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
+                            <i class="material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
+                            <span>{{groupMenuRoute.title | translate}}</span>
+                        </a>						
+                    </ng-container>
+    
+                    <ng-template #externalLink>
+                        <a class="nav-link nav-row" *ngIf="groupMenuRoute.externalUrl && groupMenuRoute.externalUrl!=''" href="{{groupMenuRoute.externalUrl}}" target="_blank">
+                            <i class="material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
+                            <span>{{groupMenuRoute.title | translate}} <span class="material-symbols-outlined icon-external">open_in_new</span></span>
+                        </a>		
+                    </ng-template>
+                </ng-template>
+            </mat-list-item>
+        }
 	</mat-list>
 
 	<!-- Sidebar Footer -->
diff --git a/frontend/src/app/ui/sidebar/sidebar.component.scss b/frontend/src/app/ui/sidebar/sidebar.component.scss
index abcce3812..1ec8cb760 100644
--- a/frontend/src/app/ui/sidebar/sidebar.component.scss
+++ b/frontend/src/app/ui/sidebar/sidebar.component.scss
@@ -8,9 +8,6 @@ $mat-card-header-size: 30px !default;
   margin-right: 7px;
 }
 
-.nav-list-item {
-}
-
 .nav-list-item-hidden {
 	display: none !important;
   }
diff --git a/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.html b/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.html
index f7b8150e3..55d6987d8 100644
--- a/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.html
+++ b/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.html
@@ -10,7 +10,7 @@
 		</div>
 	</div>
 	<div mat-dialog-content class="row">
-		<app-user-guide-content></app-user-guide-content>
+		<app-user-guide-content [isDialog]="isDialog"></app-user-guide-content>
 	</div>
 	<div mat-dialog-actions class="row">
 		<div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'GUIDE.CLOSE' | translate}}</button></div>
diff --git a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html
index 7a78d1d08..b0cd50905 100644
--- a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html
+++ b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html
@@ -1,4 +1,9 @@
 <div class="container-fluid">
+    <div *ngIf="!isDialog" class="row">
+        <div class="col-md-12">
+            <h1>{{ 'GUIDE.TITLE' | translate}}</h1>
+        </div>
+    </div>
 	<div class="row">
 		<iframe *ngIf="!useInnerHTML && guideHTMLUrl" class="iframe" id='userguide' [src]="guideHTMLUrl" (load)="onIFrameLoad(iframe)" #iframe></iframe>
 		<span #guide *ngIf="useInnerHTML" id='userguide' [innerHTML]="guideHTML"></span>
diff --git a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss
index 059d9d08e..d556cc369 100644
--- a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss
+++ b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss
@@ -6,18 +6,6 @@
 	cursor: pointer !important;
 }
 
-#userguide {
-}
-
-.custom-header {
-	font-size: 20px;
-	letter-spacing: 0px;
-	color: #212121;
-	margin-top: 67px;
-	margin-bottom: 38px;
-	opacity: 1;
-}
-
 .iframe {
 	width: 100%;
 	height: calc(100vh - 80px);
@@ -28,3 +16,8 @@
 :host :hover ::ng-deep .tocElement {
 	cursor: pointer !important;
 }
+
+h1 {
+    text-align: center;
+    margin: 2rem 0 0 0;
+}
\ No newline at end of file
diff --git a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts
index 6c91fd53e..03b948d1e 100644
--- a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts
+++ b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { SupportiveMaterialFieldType } from '@app/core/common/enum/supportive-material-field-type';
@@ -19,6 +19,8 @@ import { takeUntil } from 'rxjs/operators';
 	styleUrls: ['./user-guide-content.component.scss']
 })
 export class UserGuideContentComponent extends BaseComponent implements OnInit {
+    @Input() isDialog: boolean;
+    
 	readonly useInnerHTML: boolean = false; //GK: Change for TESTING PURPOSES ONLY
 
 	guideHTML: any;