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); } } }