diff --git a/src/app/showcase/layout/menu/app.menu.component.ts b/src/app/showcase/layout/menu/app.menu.component.ts index 136b0656012..a89d0abb6e7 100644 --- a/src/app/showcase/layout/menu/app.menu.component.ts +++ b/src/app/showcase/layout/menu/app.menu.component.ts @@ -1,9 +1,10 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { Component, ElementRef, Inject, PLATFORM_ID } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { Component, ElementRef, Inject, OnDestroy, PLATFORM_ID } from '@angular/core'; +import { NavigationEnd, Router, RouterModule } from '@angular/router'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { DomHandler } from 'primeng/dom'; import { StyleClassModule } from 'primeng/styleclass'; +import { Subscription } from 'rxjs'; import { default as MenuData } from 'src/assets/showcase/data/menu.json'; import { AppConfigService } from '../../service/appconfigservice'; import { AppMenuItemComponent } from './app.menuitem.component'; @@ -32,10 +33,12 @@ export interface MenuItem { standalone: true, imports: [CommonModule, StyleClassModule, RouterModule, AutoCompleteModule, AppMenuItemComponent] }) -export class AppMenuComponent { +export class AppMenuComponent implements OnDestroy { menu!: MenuItem[]; - constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private el: ElementRef) { + private routerSubscription: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private el: ElementRef, private router: Router) { this.menu = MenuData.data; } @@ -48,6 +51,13 @@ export class AppMenuComponent { setTimeout(() => { this.scrollToActiveItem(); }, 1); + + this.routerSubscription = this.router.events.subscribe((event) => { + if (event instanceof NavigationEnd && this.configService.state.menuActive) { + this.configService.hideMenu(); + DomHandler.unblockBodyScroll('blocked-scroll'); + } + }); } } @@ -64,4 +74,11 @@ export class AppMenuComponent { return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || (document.documentElement.clientHeight && rect.right <= (window.innerWidth || document.documentElement.clientWidth))); } } + + ngOnDestroy() { + if (this.routerSubscription) { + this.routerSubscription.unsubscribe(); + this.routerSubscription = null; + } + } } diff --git a/src/app/showcase/layout/topbar/app.topbar.component.html b/src/app/showcase/layout/topbar/app.topbar.component.html index 7a938d70a1a..c5597dfa15a 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.html +++ b/src/app/showcase/layout/topbar/app.topbar.component.html @@ -12,7 +12,8 @@ - + @@ -31,15 +32,21 @@ - - + + - - - - + + + + @@ -47,7 +54,8 @@ - + @@ -59,22 +67,28 @@ + fill="var(--primary-color-text)" /> + fill="var(--primary-color-text)" /> - - + fill="var(--primary-color-text)" /> + + - - - - + fill="var(--primary-color-text)" /> + + + + @@ -85,41 +99,45 @@
  • + class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
  • - +
  • + class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
  • -
  • -
  • - -
  • -
    • diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/src/app/showcase/layout/topbar/app.topbar.component.ts index 2f5ecc4e996..70213969639 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.ts +++ b/src/app/showcase/layout/topbar/app.topbar.component.ts @@ -3,6 +3,7 @@ import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, OnInit, import { FormsModule } from '@angular/forms'; import { Router, RouterModule } from '@angular/router'; import docsearch from '@docsearch/js'; +import { DomHandler } from 'primeng/dom'; import { StyleClassModule } from 'primeng/styleclass'; import Versions from '../../data/versions.json'; import { AppConfigService } from '../../service/appconfigservice'; @@ -41,8 +42,14 @@ export class AppTopBarComponent implements OnInit, OnDestroy { } } - showMenu() { - this.configService.showMenu(); + toggleMenu() { + if (this.configService.state.menuActive) { + this.configService.hideMenu(); + DomHandler.unblockBodyScroll('blocked-scroll'); + } else { + this.configService.showMenu(); + DomHandler.blockBodyScroll('blocked-scroll'); + } } showConfig() {