From d1c9e8b56e170401a25e41a6646389be840d611f Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Fri, 18 Aug 2023 18:04:40 +0200
Subject: [PATCH] [menu] show username at the top of the menu

---
 frontend/src/app/components/menu/menu.component.html | 4 +++-
 frontend/src/app/components/menu/menu.component.scss | 3 +++
 frontend/src/app/components/menu/menu.component.ts   | 2 ++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html
index 32fb66e0a..850eedbab 100644
--- a/frontend/src/app/components/menu/menu.component.html
+++ b/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>
diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss
index 959453c16..f8f0ab865 100644
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/menu/menu.component.ts b/frontend/src/app/components/menu/menu.component.ts
index 7746c8dc2..ac80b4a29 100644
--- a/frontend/src/app/components/menu/menu.component.ts
+++ b/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$();
   }