[menu] show hamburger when logged out, fix menu scrolling on small screen

frontend/src/app/components/master-page/master-page.component.html

@@ -3,6 +3,12 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
 <header *ngIf="headerVisible" style="position: fixed; width: 100%; z-index: 100;">
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <!-- Hamburger -->
+  <div class="profile_image_container" (click)="hamburgerClick()">
+    <img *ngIf="userAuth" [src]="'/api/v1/services/account/image/' + userAuth.user.username" class="profile_image">
+    <app-svg-images *ngIf="!userAuth" name="hamburger" height=40></app-svg-images>
+  </div>
+
   <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
   <ng-template [ngIf]="subdomain">
     <div class="subdomain_container">
@@ -64,6 +70,8 @@
 </nav>
 </header>
 
+<div class="content-padding"></div>
+
 <app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
 
 <main>

frontend/src/app/components/master-page/master-page.component.scss

@@ -86,7 +86,6 @@ li.nav-item {
 
 .navbar-brand {
   position: relative;
-  height: 65px;
 }
 
 .navbar-brand.dual-logos {
@@ -209,4 +208,23 @@ nav {
     margin-left: 5px;
     margin-right: 0px;
   }
+}
+
+.profile_image_container {
+  width: 35px;
+  margin-right: 15px;
+  text-align: center;
+  align-self: center;
+  cursor: pointer;
+}
+.profile_image {
+  height: 35px;
+  border-radius: 10px;
+}
+
+.content-padding {
+  padding-top: 65px;
+  @media (max-width: 572px) {
+    padding-top: 100px;
+  }
 }

frontend/src/app/components/master-page/master-page.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { LanguageService } from '../../services/language.service';
 import { EnterpriseService } from '../../services/enterprise.service';
 import { NavigationService } from '../../services/navigation.service';
+import { MenuComponent } from '../menu/menu.component';
 
 @Component({
   selector: 'app-master-page',
@@ -25,6 +26,10 @@ export class MasterPageComponent implements OnInit {
   networkPaths: { [network: string]: string };
   networkPaths$: Observable<Record<string, string>>;
   footerVisible = true;
+  userAuth: any | undefined;
+
+  @ViewChild(MenuComponent)
+  private menuComponent!: MenuComponent;
 
   constructor(
     public stateService: StateService,
@@ -51,6 +56,8 @@ export class MasterPageComponent implements OnInit {
         this.footerVisible = this.footerVisibleOverride;
       }
     });
+    
+    this.userAuth = JSON.parse(localStorage.getItem('auth') || '') ?? null;
   }
 
   collapse(): void {
@@ -64,4 +71,10 @@ export class MasterPageComponent implements OnInit {
   brandClick(e): void {
     this.stateService.resetScroll$.next(true);
   }
+
+  hamburgerClick(): void {
+    if (this.menuComponent) {
+      this.menuComponent.hambugerClick();
+    }
+  }
 }