Add name initials to the logout button

bcc-code · Oct 2, 2024 · 6e1761c · 6e1761c
1 parent e9cf70a
commit 6e1761c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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