[menu] show username at the top of the menu

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

@@ -1,5 +1,7 @@
 <div class="sidenav" [class]="navOpen ? 'open': 'close'" *ngIf="userMenuGroups$ | async as menuGroups">
-  <nav class="pt-3 pl-4 pr-4">
+  <nav>
+    <span *ngIf="userAuth"><strong>@ {{ userAuth.user.username }}</strong></span>
+
     <div *ngFor="let group of menuGroups" style="height: max-content;">
       <h6 class="d-flex justify-content-between align-items-center mt-4 mb-2 text-uppercase">
         <span>{{ group.title }}</span>

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

@@ -37,6 +37,9 @@
 }
 .sidenav nav {
   height: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 30px;
   padding-bottom: 50px;
   @media (max-width: 572px) {
     padding-bottom: 100px;

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

@@ -12,12 +12,14 @@ import { MenuGroup } from '../../interfaces/services.interface';
 export class MenuComponent implements OnInit {
   navOpen: boolean = false;
   userMenuGroups$: Observable<MenuGroup[]> | undefined;
+  userAuth: any | undefined;
 
   constructor(
     private apiService: ApiService
   ) {}
 
   ngOnInit(): void {
+    this.userAuth = JSON.parse(localStorage.getItem('auth') || '') ?? null;
     this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
   }