[ui] polish x1

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

@@ -77,12 +77,12 @@
 </header>
 
 <div class="d-flex" style="overflow: clip">
-  <app-menu *ngIf="servicesEnabled" (loggedOut)="onLoggedOut()"></app-menu>
+  <app-menu *ngIf="servicesEnabled" [navOpen]="menuOpen" (loggedOut)="onLoggedOut()" (menuToggled)="menuToggled($event)"></app-menu>
 
   <div class="flex-grow-1">
     <app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
 
-    <main style="max-width: 100vw;">
+    <main style="min-width: 375px" [style]="menuOpen ? 'max-width: calc(100vw - 225px)' : 'max-width: 100vw'">
       <router-outlet></router-outlet>
     </main>
 

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

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { Env, StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { LanguageService } from '../../services/language.service';
@@ -31,9 +32,10 @@ export class MasterPageComponent implements OnInit {
   userAuth: any | undefined;
   user: any = undefined;
   servicesEnabled = false;
+  menuOpen = false;
 
   @ViewChild(MenuComponent)
-  private menuComponent!: MenuComponent;
+  public menuComponent!: MenuComponent;
 
   constructor(
     public stateService: StateService,
@@ -42,6 +44,7 @@ export class MasterPageComponent implements OnInit {
     private navigationService: NavigationService,
     private storageService: StorageService,
     private apiService: ApiService,
+    private router: Router,
   ) { }
 
   ngOnInit(): void {
@@ -65,14 +68,21 @@ export class MasterPageComponent implements OnInit {
     
     this.servicesEnabled = this.officialMempoolSpace && this.stateService.env.ACCELERATOR === true && this.stateService.network === '';
     this.refreshAuth();
+
+    const isServicesPage = this.router.url.includes('/services/');
+    this.menuOpen = isServicesPage && !this.isSmallScreen();
   }
 
   collapse(): void {
     this.navCollapsed = !this.navCollapsed;
   }
 
+  isSmallScreen() {
+    return window.innerWidth <= 767.98;
+  }
+
   onResize(): void {
-    this.isMobile = window.innerWidth <= 767.98;
+    this.isMobile = this.isSmallScreen();
   }
 
   brandClick(e): void {
@@ -90,7 +100,12 @@ export class MasterPageComponent implements OnInit {
   hamburgerClick(event): void {
     if (this.menuComponent) {
       this.menuComponent.hamburgerClick();
+      this.menuOpen = this.menuComponent.navOpen;
       event.stopPropagation();
     }
   }
+
+  menuToggled(isOpen: boolean): void {
+    this.menuOpen = isOpen;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter, HostListener } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, HostListener } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ApiService } from '../../services/api.service';
 import { MenuGroup } from '../../interfaces/services.interface';
@@ -13,9 +13,10 @@ import { StateService } from '../../services/state.service';
 })
 
 export class MenuComponent implements OnInit {
+  @Input() navOpen: boolean = false;
   @Output() loggedOut = new EventEmitter<boolean>();
+  @Output() menuToggled = new EventEmitter<boolean>();
   
-  navOpen: boolean = false;
   userMenuGroups$: Observable<MenuGroup[]> | undefined;
   userAuth: any | undefined;
   isServicesPage = false;
@@ -34,17 +35,20 @@ export class MenuComponent implements OnInit {
     }
 
     this.isServicesPage = this.router.url.includes('/services/');
-    this.navOpen = this.isServicesPage && !this.isSmallScreen();
-
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationStart) {
         if (!this.isServicesPage) {
-          this.navOpen = false;
+          this.toggleMenu(false);
         }
       }
     });
   }
 
+  toggleMenu(toggled: boolean) {
+    this.navOpen = toggled;
+    this.menuToggled.emit(toggled);
+  }
+
   isSmallScreen() {
     return window.innerWidth <= 767.98;
   }
@@ -61,13 +65,13 @@ export class MenuComponent implements OnInit {
 
   onLinkClick(link) {
     if (!this.isServicesPage || this.isSmallScreen()) {
-      this.navOpen = false;
+      this.toggleMenu(false);
     }
     this.router.navigateByUrl(link);
   }
 
   hamburgerClick() {
-    this.navOpen = !this.navOpen;
+    this.toggleMenu(!this.navOpen);
     this.stateService.menuOpen$.next(this.navOpen);
   }
 
@@ -78,7 +82,7 @@ export class MenuComponent implements OnInit {
 
     if (!cssClasses.indexOf) { // Click on chart or non html thingy, close the menu
       if (!this.isServicesPage || isServicesPageOnMobile) {
-        this.navOpen = false;
+        this.toggleMenu(false);
       }
       return;
     }
@@ -86,8 +90,7 @@ export class MenuComponent implements OnInit {
     const isHamburger = cssClasses.indexOf('profile_image') !== -1;
     const isMenu = cssClasses.indexOf('menu-click') !== -1;
     if (!isHamburger && !isMenu && (!this.isServicesPage || isServicesPageOnMobile)) {
-      this.navOpen = false;
+      this.toggleMenu(false);
-      return;
     }
   }
 }