fix sidebar lists, fix navbar duplicate user menut toggle button, change top navbar behavior on small screen size, add title to user guide

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>
-                        }
                 </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>

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;

frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html

@@ -1,9 +1,13 @@
 <div class="sidebar-footer col-12">
-
+    @for(footerItems of nestedFooterItems; track footerItems){
-	<div *ngFor="let footerItems of nestedFooterItems" class="row ml-2">
+        <ul class="row horizontal-list">
-		<div *ngFor="let item of footerItems; let index = index;" class="col-auto" [ngClass]="{'ml-3': index%2==1}" tabindex="0">
+            @for(item of footerItems; track item; let index=$index){
-			<p class="option" [ngClass]="{'option-active': this.router.url === item.routerPath}" [routerLink]="routerUtils.generateUrl(item.routerPath)">
+                <li class="col-auto option" [ngClass]="{'option-active': this.router.url === item.routerPath, 'ml-3': index%2==1}" tabindex="0">
-				{{ item.title | translate}}</p>
+                    <span  [routerLink]="routerUtils.generateUrl(item.routerPath)">
-		</div>
+                        {{ item.title | translate}}
-	</div>
+                    </span>
+                </li>
+            }
+        </ul>
+    }
 </div>

frontend/src/app/ui/sidebar/sidebar.component.html

@@ -1,14 +1,14 @@
 <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);">
+		@if(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}">
+                <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">{{ groupMenuRoute.icon }}</i>
+                        <i class="material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
-						<i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask">person</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>
                     
@@ -16,8 +16,8 @@
                         <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" aria-hidden>{{ groupMenuRoute.icon }}</i>
-								<i class="mb-1 material-symbols-outlined icon-mask">person</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>
@@ -28,20 +28,20 @@
     
                     <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>
+                            <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">{{ groupMenuRoute.icon }}</i>
+                            <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>
-		</div>
+        }
 	</mat-list>
 
 	<!-- Sidebar Footer -->

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;
   }

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>

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>

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;
+}

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;