diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index b24442f23..74a95daf5 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -77,12 +77,12 @@
-
+
-
+
diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts
index 06ec1784e..49bed7a5d 100644
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/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;
+ }
}
diff --git a/frontend/src/app/components/menu/menu.component.ts b/frontend/src/app/components/menu/menu.component.ts
index a560a1b49..e6ba848bc 100644
--- a/frontend/src/app/components/menu/menu.component.ts
+++ b/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();
-
- navOpen: boolean = false;
+ @Output() menuToggled = new EventEmitter();
+
userMenuGroups$: Observable | 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;
- return;
+ this.toggleMenu(false);
}
}
}