diff --git a/src/frontend/src/app/navigation/header/header.component.html b/src/frontend/src/app/navigation/header/header.component.html index c1916f5d3774efa096a3f1e113c15ac01c355627..69a17f539cb438951542bd34aa84c7cc63ec8dc2 100644 --- a/src/frontend/src/app/navigation/header/header.component.html +++ b/src/frontend/src/app/navigation/header/header.component.html @@ -79,37 +79,56 @@ <button nz-button *ngIf="!loggedIn" (click)="handleSSOClick()">Single Sign-On (SSO)</button> <div *ngIf="loggedIn" class="login-info"> - <a nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click">{{ loggedIn.email }}</a> + <a nz-dropdown [nzDropdownMenu]="menu" class="user-email"> + {{ loggedIn.email }} + <i nz-icon nzType="down" nzTheme="outline"></i> + </a> + <nz-dropdown-menu #menu="nzDropdownMenu"> <ul nz-menu> <li nz-menu-item routerLink="/profil"> - <fa-icon [icon]="faUser"></fa-icon> - <span i18n="Profile | Header profile dropdown entry @@profileProfileDropDown" - >Profile</span> + <span class="menu-item"> + <fa-icon [icon]="faUser" class="menu-icon"></fa-icon> + <span class="menu-text" + i18n="Profile | Header profile dropdown entry @@profileProfileDropDown"> + Profile + </span> + </span> </li> - <li nz-menu-item routerLink="/data-disclosure" *ngIf="environment.pageVisibility.data_disclosure && !loggedIn?.isProvider"> - <fa-icon [icon]="faDownload"></fa-icon> - <span - i18n=" - Data disclosure | Header profile dropdown entry - @@dataDisclosureProfileDropDown" - >Data disclosure</span> + + <li nz-menu-item + routerLink="/data-disclosure" + *ngIf="environment.pageVisibility.data_disclosure && !loggedIn?.isProvider"> + <span class="menu-item"> + <fa-icon [icon]="faDownload" class="menu-icon"></fa-icon> + <span class="menu-text" + i18n="Data disclosure | Header profile dropdown entry @@dataDisclosureProfileDropDown"> + Data disclosure + </span> + </span> </li> - + <li nz-menu-item routerLink="/data-removal" *ngIf="!loggedIn?.isProvider"> - <fa-icon [icon]="faTrash"></fa-icon> - <span - i18n="Data removal | Header profile dropdown entry @@dataRemovalProfileDropDown" - >Data removal</span> + <span class="menu-item"> + <fa-icon [icon]="faTrash" class="menu-icon"></fa-icon> + <span class="menu-text" + i18n="Data removal | Header profile dropdown entry @@dataRemovalProfileDropDown"> + Data removal + </span> + </span> </li> - + <li nz-menu-item (click)="logout()"> - <fa-icon [icon]="faSignOutAlt"></fa-icon> - <span i18n="Logout | Header profile dropdown entry @@logoutProfileDropDown" - >Logout</span> + <span class="menu-item"> + <fa-icon [icon]="faSignOutAlt" class="menu-icon"></fa-icon> + <span class="menu-text" + i18n="Logout | Header profile dropdown entry @@logoutProfileDropDown"> + Logout + </span> + </span> </li> </ul> </nz-dropdown-menu> - </div> + </div> </div> </nz-header> diff --git a/src/frontend/src/app/navigation/header/header.component.scss b/src/frontend/src/app/navigation/header/header.component.scss index 840a707c5ac532f934b74a790a18d3f684460ce4..57080407793fa169ac49a91628f468f46dfd74a2 100644 --- a/src/frontend/src/app/navigation/header/header.component.scss +++ b/src/frontend/src/app/navigation/header/header.component.scss @@ -20,3 +20,20 @@ nz-header { background: #FFF; display: flex; } +.menu-item { + display: flex; + align-items: center; + padding: 8px 12px; + gap: 12px; // Adds space between icon and text +} + +.menu-icon { + font-size: 18px; + color: #595959; + min-width: 22px; // Ensures consistent spacing +} + +.menu-text { + font-size: 14px; + font-weight: 500; +} \ No newline at end of file