show authenticated user in navbar

Author: shoudaos

src/app/layout/navbar/navbar.component.ts

@@ -13,6 +13,7 @@ export class NavbarComponent implements OnInit {
   @Output() toggleChatEvent: EventEmitter<any> = new EventEmitter();
   $el: any;
   config: any;
+  user: any = JSON.parse(localStorage.getItem('user')) || {};
 
   constructor(
     el: ElementRef,
@@ -40,6 +41,10 @@ export class NavbarComponent implements OnInit {
     this.loginService.logoutUser();
   }
 
+  firstUserLetter() {
+    return (this.user.name || this.user.email || 'P')[0].toUpperCase();
+  }
+
   ngOnInit(): void {
     setTimeout(() => {
       const $chatNotification = jQuery('#chat-notification');

src/app/layout/navbar/navbar.template.html

@@ -52,11 +52,17 @@
     <li class="nav-item dropdown" dropdown placement="bottom right" [autoClose]="false">
       <a href="#" dropdownToggle class="nav-link dropdown-toggle dropdown-toggle-notifications"
          id="notifications-dropdown-toggle">
-         <span class="avatar thumb-sm float-left mr-2">
-            <img class="rounded-circle" src="assets/img/people/a5.jpg" alt="..." />
-          </span>
-          <span class="small">Philip <span class="fw-semi-bold">Smith</span></span>
-          <span class="ml-1 circle bg-warning text-white fw-bold">13</span>
+        <span class="avatar rounded-circle thumb-sm float-left mr-2">
+          <img
+            *ngIf="user.avatar || user.email === 'admin@flatlogic.com'; else firstLetter"
+            class="rounded-circle"
+            [src]="user.avatar || 'assets/img/people/a5.jpg'"
+            alt="..."
+          />
+          <ng-template #firstLetter>{{firstUserLetter}}</ng-template>
+        </span>
+        <span class="small">{{user.name || user.email || "Philip smith"}}</span>
+        <span class="ml-1 circle bg-warning text-white fw-bold">13</span>
       </a>
       <!-- ready to use notifications dropdown. inspired by smartadmin template.
                    consists of three components:

src/app/styles/_base.scss

@@ -94,7 +94,15 @@ app, .app {
   }
 
   .avatar{
-    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    height: 40px;
+    width: 40px;
+    background: #ffc247;
+    font-weight: 600;
+    font-size: 18px;
   }
 
   .navbar-nav {