Using the profile picture instead of the icon in the top menu

src/app/app.html

@@ -58,9 +58,11 @@
             <p>{{ profile?.about }}</p>
           </div>
         </div>
+      <a [routerLink]="['/profile']" (click)="toggleProfileMenu()">
         <div class="avatarcontainer">
           <img [src]="profile?.picture" onerror="this.src='/assets/profile.png'" alt="avatar" class="avatar" />
         </div>
+      </a>
       </header>
       <div class="content">
         <div class="data">
@@ -146,9 +148,8 @@
 
       <button *ngIf="!appState.connected" [mtBasicSpinner]="true" mat-icon-button></button>
 
-      <button *ngIf="!appState.showSearch" mat-icon-button (click)="draweraccount.toggle()">
-        <mat-icon>account_circle</mat-icon>
-      </button>
+      <img *ngIf="!appState.showSearch" mat-icon-button (click)="draweraccount.toggle()" [src]="profile?.picture" onerror="this.src='/assets/profile.png'" alt="avatar" class="topavatar" />
+
     </mat-toolbar>
 
     <div class="scrolling-content" appDetectScroll (onScroll)="onScroll($event)" [bottomOffset]="300" [topOffset]="300">

src/app/app.scss

@@ -75,14 +75,27 @@ header {
   border-radius: 50%;
   overflow: hidden;
   position: relative;
-}
-
-.avatar img {
   width: 65px;
   height: 65px;
+  opacity: 0.9;
 }
 
-.avatar:hover + .hover {
+.avatar:hover {
+  opacity: 1;
+  cursor: pointer;
+}
+
+.topavatar {
+  border: 3px solid #9c27b0;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  width: 32px;
+  height: 32px;
+  opacity: 0.9;
+}
+
+.topavatar:hover {
   opacity: 1;
   cursor: pointer;
 }

src/styles.scss

@@ -697,6 +697,10 @@ mat-card-footer {
   margin-bottom: 20px;
 }
 
+.mat-mdc-icon-button.mat-mdc-button-base{
+  padding: 9px !important;
+}
+
 @media only screen and (max-width: 599px) {
   .full-width-dialog {
     max-width: 100vw !important;