From a9d528072c31037292a978b9ca81f6f65ee6de60 Mon Sep 17 00:00:00 2001
From: Benjamin Ledel <benjamin@schule-plus.com>
Date: Tue, 4 Mar 2025 17:45:50 +0100
Subject: [PATCH] * adjust dropdown menu
---
.../navigation/header/header.component.html | 61 ++++++++++++-------
.../navigation/header/header.component.scss | 17 ++++++
2 files changed, 57 insertions(+), 21 deletions(-)
diff --git a/src/frontend/src/app/navigation/header/header.component.html b/src/frontend/src/app/navigation/header/header.component.html
index c1916f5..69a17f5 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 840a707..5708040 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
--
GitLab