[app] added profile picture is toolbar

src/app/app.component.html

@@ -29,30 +29,41 @@
 
 <ng-template #toolbarItems>
   @for (item of [
-      {icon:'home',link:'/',title:'Home',titleKey:'home'},
-      {icon:'notifications',title:'Notifications',titleKey:'notifications',menu:notifications},
-      {icon:'account_circle',menu:userMenu,title:'User',titleKey:'user'}
+      {id:'home',icon:'home',link:'/',title:'Home',key:'home_page'},
+      {id:'notifs',icon:'notifications',title:'Notifications',key:'notifs',menu:notifications},
+      {id:'user',icon:'account_circle',menu:userMenu,title:'User & Settings',key:'#{user} & #{settings}'}
     ]; track $index) {
       @switch (true) {
         @case (item.link !== undefined) {
-          <div id="{{item.titleKey}}" class="toolbar-item" [routerLink]="item.link">
+          <div id="{{item.id}}" class="toolbar-item" [routerLink]="item.link">
             <mat-icon>{{item.icon}}</mat-icon>
-            <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
+            <mat-label>{{(item.key|tr:item.title)}}</mat-label>
+          </div>
+        }
+        @case (item.id === 'user') {
+          <div id="{{item.id}}" class="toolbar-item" [matMenuTriggerFor]="item.menu">
+            @if (loginService?.user?.pictures?.length > 0) {
+              <img title="{{'profile_pic'|tr:'Profile Picture'}}" class="profile-pic" src="{{loginService?.user?.pictures[0]?.value}}">
+            }
+            @else {
+              <mat-icon id="{{item.key}}-icon">{{item.icon}}</mat-icon>
+            }
+            <mat-label>{{(item.key|tr:item.title)}}</mat-label>
           </div>
         }
         @case (item.menu !== undefined) {
-          <div id="{{item.titleKey}}" class="toolbar-item" [matMenuTriggerFor]="item.menu">
-            <mat-icon id="{{item.titleKey}}-icon">{{item.icon}}</mat-icon>
-            <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
-            @if (item.titleKey === 'notifications' && notificationCount > 0) {
+          <div id="{{item.id}}" class="toolbar-item" [matMenuTriggerFor]="item.menu">
+            <mat-icon id="{{item.key}}-icon">{{item.icon}}</mat-icon>
+            <mat-label>{{(item.key|tr:item.title)}}</mat-label>
+            @if (item.key === 'notifs' && notificationCount > 0) {
               <div class="count">{{notificationCount}}</div>
             }
           </div>
         }
         @default {
-          <div id="{{item.titleKey}}" class="toolbar-item">
+          <div id="{{item.id}}" class="toolbar-item">
             <mat-icon>{{item.icon}}</mat-icon>
-            <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
+            <mat-label>{{(item.key|tr:item.title)}}</mat-label>
           </div>
         }
       }
@@ -79,6 +90,7 @@
 
 <!--menus-->
 <mat-menu #userMenu="matMenu">
+  <button mat-menu-item>{{'my_account'|tr:'My Account'}}</button>
   <button mat-menu-item [matMenuTriggerFor]="settings">{{'settings'|tr:'Settings'}}</button>
   <button mat-menu-item (click)="loginService.logout()" [disabled]="!loginService.user">
     <mat-icon>logout</mat-icon>

src/app/app.component.scss

@@ -61,6 +61,11 @@
     background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
 }
 
+.toolbar-item > .profile-pic {
+    height: 25px;
+    border-radius: 50%;
+}
+
 .toolbar, .mobile-toolbar {
     height: 40px;
 }