(feat): added icons (except for Discovery)

src/app/common/components/tooltip/tooltip.component.html

 <div class="m-tooltip" [class.m-tooltip--anchored]="!!anchor">
-  <i *ngIf="icon" class="material-icons" [ngClass]="iconClass">{{ icon }}</i>
+  <i *ngIf="icon && !iconSrc" class="material-icons" [ngClass]="iconClass">{{
+    icon
+  }}</i>
+  <img *ngIf="iconSrc && !icon" [src]="cdnAssetsUrl + iconSrc" />
   <ng-content select="[m-tooltip--anchor]"></ng-content>
 
   <div

src/app/common/components/tooltip/tooltip.component.scss

@@ -5,6 +5,10 @@ m-tooltip {
   .m-tooltip--anchored {
     position: relative;
   }
+
+  img {
+    height: 24px;
+  }
 }
 
 .m-tooltip--bubble {

src/app/common/components/tooltip/tooltip.component.ts

 import { Component, ElementRef, Input } from '@angular/core';
+import { ConfigsService } from '../../services/configs.service';
 
 @Component({
   selector: 'm-tooltip',
@@ -12,15 +13,20 @@ export class TooltipComponent {
   @Input() icon;
   @Input() anchor: 'top' | 'bottom' | 'right' | 'left';
   @Input() iconClass;
+  @Input() iconSrc;
   @Input() useParentPosition: boolean = false;
   @Input() enabled: boolean = true;
 
+  public readonly cdnAssetsUrl: string;
+
   hidden: boolean = true;
   offsetTop: number = 0;
   offsetRight: number = 0;
   offsetLeft: number = 0;
 
-  constructor(private element: ElementRef) {}
+  constructor(private element: ElementRef, private configs: ConfigsService) {
+    this.cdnAssetsUrl = this.configs.get('cdn_assets_url');
+  }
 
   setHidden(value: boolean) {
     if (!value && !this.enabled) {

src/app/common/layout/sidebar/navigation.component.html

@@ -11,6 +11,16 @@
 
       <i class="material-icons" (click)="toggle()">close</i>
     </div>
+
+    <div class="m-sidebarNavigation__user" *ngIf="user">
+      <a [routerLink]="['/' + user.username]" (click)="toggle()">
+        <img
+          [src]="cdnAssetsUrl + 'icon/' + user.guid + '/small/' + user.icontime"
+          alt=""
+        />
+        @{{ user.username }}
+      </a>
+    </div>
     <ul>
       <li>
         <a
@@ -21,7 +31,7 @@
           (click)="toggle()"
         >
           <m-tooltip
-            icon="check"
+            icon="home"
             i18n="@@COMMON__NEWSFEED"
             [enabled]="layoutMode === 'tablet'"
           >
@@ -72,7 +82,7 @@
           (click)="toggle()"
         >
           <m-tooltip
-            icon="check"
+            iconSrc="assets/icons/wire.svg"
             i18n="@@COMMON__WALLET"
             [enabled]="layoutMode === 'tablet'"
           >
@@ -89,31 +99,6 @@
         </a>
       </li>
 
-      <li>
-        <a
-          class="m-sidebar--navigation--item"
-          [routerLink]="['/' + user.username]"
-          [routerLinkActive]="'m-sidebar--navigation--item-active'"
-          (click)="toggle()"
-        >
-          <m-tooltip
-            icon="check"
-            i18n="@@COMMON__PROFILE"
-            [enabled]="layoutMode === 'tablet'"
-          >
-            Profile
-          </m-tooltip>
-
-          <span
-            class="m-sidebar--navigation--text"
-            *ngIf="layoutMode !== 'tablet'"
-            i18n
-          >
-            Profile
-          </span>
-        </a>
-      </li>
-
       <li>
         <a
           class="m-sidebar--navigation--item"
@@ -122,7 +107,7 @@
           (click)="toggle()"
         >
           <m-tooltip
-            icon="check"
+            icon="show_chart"
             i18n="@@COMMON__ANALYTICS"
             [enabled]="layoutMode === 'tablet'"
           >
@@ -146,7 +131,7 @@
           (click)="toggle()"
         >
           <m-tooltip
-            icon="check"
+            icon="more_horiz"
             i18n="@@COMMON__SETTINGS"
             [enabled]="layoutMode === 'tablet'"
           >

src/app/common/layout/sidebar/navigation.component.scss

@@ -33,6 +33,36 @@ m-sidebar--navigation {
     }
   }
 
+  .m-sidebarNavigation__user {
+    a {
+      display: flex;
+      align-items: center;
+      font-weight: bold;
+      font-size: 17px;
+      line-height: 44px;
+      text-decoration: none;
+      cursor: pointer;
+
+      @include m-theme() {
+        color: themed($m-textColor--secondary);
+      }
+
+      &:hover {
+        @include m-theme() {
+          color: themed($m-black);
+        }
+      }
+
+      img {
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+
+        margin-right: 28px;
+      }
+    }
+  }
+
   .m-sidebar--navigation {
     grid-area: nav;
 
@@ -94,8 +124,12 @@ m-sidebar--navigation {
         }
       }
 
+      .m-sidebarNavigation__user {
+        padding-top: 37px;
+      }
+
       ul {
-        padding: 37px 35px 0;
+        padding: 0 35px 0;
 
         .m-sidebar--navigation--item {
           margin: 4px 0;
@@ -144,8 +178,11 @@ m-sidebar--navigation {
       }
     }
 
-    i.material-icons {
-      margin-right: 30px;
+    m-tooltip {
+      i.material-icons,
+      img {
+        margin-right: 30px;
+      }
     }
   }
 }

src/app/common/layout/sidebar/navigation.component.ts

 import {
+  AfterViewInit,
   Component,
   ComponentFactoryResolver,
   HostBinding,
@@ -16,12 +17,13 @@ import { GroupsSidebarMarkersComponent } from '../../../modules/groups/sidebar-m
 import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
 import { SidebarNavigationService } from './navigation.service';
 import { ConfigsService } from '../../services/configs.service';
+import { MindsUser } from '../../../interfaces/entities';
 
 @Component({
   selector: 'm-sidebar--navigation',
   templateUrl: 'navigation.component.html',
 })
-export class SidebarNavigationComponent implements OnInit {
+export class SidebarNavigationComponent implements OnInit, AfterViewInit {
   readonly cdnAssetsUrl: string;
 
   @ViewChild(DynamicHostDirective, { static: true })