From 31089fdeba29f7a5a57d540aecf0c6f310c5aee2 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Mon, 30 Sep 2024 17:07:45 +0300
Subject: [PATCH] small fix navbar height  responsiveness

---
 .../src/app/ui/navbar/navbar.component.html   | 32 +++++++++++--------
 .../src/app/ui/navbar/navbar.component.scss   | 13 +++-----
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/ui/navbar/navbar.component.html b/frontend/src/app/ui/navbar/navbar.component.html
index ed9d699ba..eee5e187f 100644
--- a/frontend/src/app/ui/navbar/navbar.component.html
+++ b/frontend/src/app/ui/navbar/navbar.component.html
@@ -6,7 +6,7 @@
                 <div class="icon-bar2"></div>
                 <div class="icon-bar3"></div>
             </button>
-            <h1 class="logo mr-auto" >
+            <h1 class="logo" >
                 <a [routerLink]="routerUtils.generateUrl(['home'])">
                     <img class="logo-image" alt="{{('ALT-TEXT.GO-TO-MAIN' | translate) ?? 'go to main page'}}" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
                 </a>
@@ -17,7 +17,7 @@
                 </a>
             }
 
-			<ul class="horizontal-list justify-content-end" id="navigation">
+			<ul class="ml-auto horizontal-list justify-content-end" id="navigation">
                 <li class="navbar-item-sm ml-auto">
                     <button mat-icon-button [matMenuTriggerFor]="toggleMenu" [attr.aria-label]="'ALT-TEXT.USER-OPTIONS' | translate">
                         <mat-icon aria-hidden>more_horiz</mat-icon>
@@ -67,24 +67,28 @@
 				</li>
 
                 <!-- Login -->
-				<li class="pl-2">
-                    @if(this.isAuthenticated()) {
-                        <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
-                            <img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
-                        </button>
-                    }@else {
-                        <ng-container *ngTemplateOutlet="loginOptionTemplate"/>
-                    }
+				<li class="navbar-item-lg pl-2">
+                    <ng-container *ngTemplateOutlet="userSettingsTemplate"/>
 				</li>
 			</ul>
-            <ng-template #loginOptionTemplate>
-                <button mat-button [routerLink]=" ['/login'] ">
-                    <span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
-                </button>
+
+            <ng-template #userSettingsTemplate>
+                @if(this.isAuthenticated()) {
+                    <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
+                        <img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
+                    </button>
+                }@else {
+                    <button mat-button [routerLink]=" ['/login'] ">
+                        <span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
+                    </button>
+                }
             </ng-template>
 
 			<mat-menu #toggleMenu="matMenu">
                 <ul class="list m-2">       
+                    <li class="d-flex justify-content-center">
+                        <ng-container *ngTemplateOutlet="userSettingsTemplate" tabindex="0"/>
+                    </li>
                     <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()" [attr.aria-label]="'FAQ.TITLE' | translate">{{ 'FAQ.TITLE' | translate }}</button>
                         <button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();">
diff --git a/frontend/src/app/ui/navbar/navbar.component.scss b/frontend/src/app/ui/navbar/navbar.component.scss
index 1a6edb8a0..1293fd141 100644
--- a/frontend/src/app/ui/navbar/navbar.component.scss
+++ b/frontend/src/app/ui/navbar/navbar.component.scss
@@ -37,7 +37,6 @@ $mat-card-header-size: 40px !default;
   position: fixed;
   z-index: 1000;
   height: 80px;
-  min-height: fit-content; //for mobile
 
   display: flex;
   background: #ffffff 0% 0% no-repeat padding-box;
@@ -51,12 +50,12 @@ $mat-card-header-size: 40px !default;
   left: 0;
   right: 0;
 
-  padding: 0.625rem 0;
+//   padding: 0.625rem 0;
 }
 
 .logo {
   margin-left: 5px;
-  height: 100%;
+  height: min(100%, 60px);
 }
 
 .extra-logo {
@@ -64,10 +63,10 @@ $mat-card-header-size: 40px !default;
   height: 100%;
 }
 .logo-image {
-	height: 100%;
+	height: min(100%, 60px);
 }
 .extra-logo-image {
-	height: 100%;
+	height: min(100%, 60px);
 }
 
 .faq-title {
@@ -189,7 +188,3 @@ $mat-card-header-size: 40px !default;
     padding: 0 !important;
   }
 }
-
-.container-fluid {
-    min-height: fit-content;
-}
\ No newline at end of file