[menu] show og rank and active subscription in menu

frontend/src/app/components/menu/menu.component.html

@@ -2,13 +2,19 @@
   <div class="d-flex menu-click">
 
     <nav class="scrollable menu-click">
-      <span *ngIf="userAuth" class="menu-click">
+      <span *ngIf="user$ | async as user" class="menu-click">
-        <u class="menu-click text-nowrap ellipsis">
+        <span class="menu-click text-nowrap ellipsis">
           <strong>
-            <span *ngIf="userAuth.user.username.includes('@'); else usernamenospace">{{ userAuth.user.username }}</span>
+            <span *ngIf="user.username.includes('@'); else usernamenospace">{{ user.username }}</span>
-            <ng-template #usernamenospace>@{{ userAuth.user.username }}</ng-template>
+            <ng-template #usernamenospace>@{{ user.username }}</ng-template>
           </strong>
-        </u>
+        </span>
+        <span class="badge mr-1 badge-og" *ngIf="user.ogRank">
+          OG #{{ user.ogRank }}
+        </span>
+        <span class="badge mr-1 badge-default" [class]="'badge-' + user.subscription_tag" *ngIf="user.subscription_tag !== 'free'">
+          {{ user.subscription_tag.toUpperCase() }}
+        </span>
       </span>
       <a *ngIf="!userAuth" class="d-flex justify-content-center align-items-center nav-link m-0  menu-click" routerLink="/login" role="tab" (click)="onLinkClick('/login')">
         <fa-icon class="menu-click" [icon]="['fas', 'user-circle']" [fixedWidth]="true" style="font-size: 25px;margin-right: 15px;"></fa-icon>

frontend/src/app/components/menu/menu.component.scss

@@ -56,3 +56,35 @@
 @media screen and (max-height: 450px) {
   .sidenav a {font-size: 18px;}
 }
+
+.badge-default {
+  background-color: black;
+}
+
+.badge-og {
+  background-color: #4a68b9;
+}
+
+.badge-pleb {
+  background-color: #3ccbe3;
+}
+
+.badge-chad {
+  background-color: #957d0b;
+}
+
+.badge-whale {
+  background-color: #653b9c;
+}
+
+.badge-silver {
+  background-color: #95a5a6;
+}
+
+.badge-gold {
+  background-color: #f1c40f;
+}
+
+.badge-platinium {
+  background-color: #653b9c;
+}

frontend/src/app/services/services-api.service.ts

@@ -20,6 +20,7 @@ export interface IUser {
   fullName: string | null;
   countryCode: string | null;
   imageMd5: string;
+  ogRank: number | null;
 }
 
 // Todo - move to config.json