From 6e1761c95dd2c56f1206d5cdc1c298149d831e2f Mon Sep 17 00:00:00 2001
From: Simon Costea <simoncostea@yahoo.com>
Date: Wed, 2 Oct 2024 15:28:28 +0200
Subject: [PATCH] Add name initials to the logout button

---
 src/Experience/Components/Menu.js | 12 ++++++++++++
 src/index.html                    |  1 +
 src/scss/style.scss               | 11 -----------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/Experience/Components/Menu.js b/src/Experience/Components/Menu.js
index df0fb2e9..78ee7ca1 100644
--- a/src/Experience/Components/Menu.js
+++ b/src/Experience/Components/Menu.js
@@ -167,8 +167,20 @@ export default class Menu {
 
         if (loginBtn) {
             loginBtn.disabled = instance.logInLogOut.login
+        }
+
+        if (logoutBtn) {
             logoutBtn.disabled = instance.logInLogOut.logout
         }
+
+        if (instance.logInLogOut.logout === false) {
+            const nameInitials =
+                instance.experience.auth0.userData.given_name.substr(0, 1) +
+                instance.experience.auth0.userData.family_name.substr(0, 1)
+
+            // Set user's name initials
+            logoutBtn.querySelector('.name-initials').textContent = nameInitials
+        }
     }
 
     login = async () => {
diff --git a/src/index.html b/src/index.html
index b7f09e9d..11d6d572 100644
--- a/src/index.html
+++ b/src/index.html
@@ -151,6 +151,7 @@
                             <div class="edge left"></div>
                             <div class="content">
                                 <svg class="icon"><use href="#user-solid" fill="currentColor"></use></svg>
+                                <span class="name-initials"></span>
                             </div>
                             <div class="edge right"></div>
                             <div class="corner bottom-left"></div>
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 22fa468d..7399ef64 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -547,17 +547,6 @@ body.not-logged-in {
     font-size: calc(var(--font-size-button) * 1.25);
 }
 
-#logout-button::after {
-    content: '';
-    position: absolute;
-    width: 14%;
-    height: 14%;
-    border-radius: 99px;
-    right: 20%;
-    top: 20%;
-    background-color: greenyellow;
-}
-
 /* #endregion */
 
 // #region GUI