From 69a8fbc9c5c7244dd924ccc8fe40d951fe465167 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Fri, 10 Feb 2023 18:10:33 -0500
Subject: [PATCH] cleanup user profile menu item

---
 .../navigation-menu.component.html            | 13 +++-----
 .../navigation-menu.component.scss            | 32 -------------------
 .../navigation-menu.component.ts              | 12 ++++---
 3 files changed, 11 insertions(+), 46 deletions(-)
 delete mode 100644 projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss

diff --git a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html
index a9cbd0a06..53b41a1e8 100644
--- a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html
+++ b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html
@@ -1,15 +1,10 @@
-<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="matMenu" class="app-menu-button">
+<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="matMenu">
     <mat-icon title="{{'APP.TOOLTIPS.OPTIONS_SETTINGS' | translate}}">apps</mat-icon>
 </button>
 <mat-menu #menu="matMenu" xPosition="before">
-    <div mat-menu-item class="app-menu-user-details" [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
-        <button class="app-menu-user-details-button" aria-label="matMenu">
-            <mat-icon>account_circle</mat-icon>
-        </button>
-        <div class="app-menu-user-details-name-mail">
-            <div class="app-menu-user-details-name">{{ userName }}</div>
-            <div class="app-menu-user-details-name">{{ userEmail }}</div>
-        </div>
+    <div mat-menu-item [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
+        <mat-icon>account_circle</mat-icon>
+        <span>{{ displayName }}</span>
     </div>
     <mat-divider></mat-divider>
     <button mat-menu-item data-automation-id="language-menu-button" [matMenuTriggerFor]="langMenu">
diff --git a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss
deleted file mode 100644
index 633c82c7b..000000000
--- a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-app-navigation-menu {
-    .app-menu-button {
-        height: 32px;
-        background: none;
-        line-height: 24px;
-    }
-}
-
-.mat-menu-panel {
-    .app-menu-user-details {
-        display: flex;
-        height: 66px;
-
-        &-button {
-            height: 32px;
-            padding: 0;
-            line-height: 24px;
-            background: none;
-            border: none;
-            margin-top: 14px;
-            transform: scale(1.2);
-        }
-
-        &-name-mail {
-            line-height: 40px;
-        }
-
-        &-name {
-            height: 24px;
-        }
-    }
-}
diff --git a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts
index ee8f5506a..24b45a377 100644
--- a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts
+++ b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts
@@ -12,20 +12,22 @@ import { ContentApiService } from '@alfresco/aca-shared';
 @Component({
   selector: 'app-navigation-menu',
   templateUrl: './navigation-menu.component.html',
-  styleUrls: ['./navigation-menu.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class NavigationMenuComponent implements OnInit {
-  userName = '';
-  userEmail = '';
+  displayName = 'Unknown user';
 
   constructor(private contentApi: ContentApiService) {}
 
   ngOnInit() {
     this.contentApi.getPerson('-me-').subscribe((person) => {
       const personDetails = person?.entry;
-      this.userName = personDetails.displayName;
-      this.userEmail = personDetails.email;
+
+      this.displayName = personDetails.displayName;
+
+      if (personDetails.email) {
+        this.displayName = `${personDetails.displayName} (${personDetails.email})`;
+      }
     });
   }
 }