Apply blocked scroll on menu

primefaces · Nov 28, 2023 · b3a3aa4 · b3a3aa4
1 parent 0c7b6a4
commit b3a3aa4
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 42 deletions.
diff --git 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
@@ -12,7 +12,8 @@
                     <path
                         d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z"
                         fill="var(--primary-color)" />
-                    <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
+                    <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31"
+                        height="33">
                         <path
                             d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z"
                             fill="var(--primary-color-text)" />
@@ -31,23 +32,30 @@
                     <path fill-rule="evenodd" clip-rule="evenodd"
                         d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
                         fill="var(--primary-color-text)" />
-                    <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)" />
-                    <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)" />
+                    <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z"
+                        fill="var(--primary-color-text)" />
+                    <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z"
+                        fill="var(--primary-color-text)" />
                     <path fill-rule="evenodd" clip-rule="evenodd"
                         d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
                         fill="var(--primary-color-text)" />
-                    <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)" />
-                    <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)" />
-                    <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)" />
-                    <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)" />
+                    <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z"
+                        fill="var(--primary-color-text)" />
+                    <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z"
+                        fill="var(--primary-color-text)" />
+                    <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z"
+                        fill="var(--primary-color-text)" />
+                    <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z"
+                        fill="var(--primary-color-text)" />
                 </svg>
             </a>
             <a [routerLink]="['/']" class="layout-topbar-icon" aria-label="PrimeNG Logo">
                 <svg width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
                         d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z"
                         fill="var(--primary-color)" />
-                    <mask id="mask0_1_52" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
+                    <mask id="mask0_1_52" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31"
+                        height="33">
                         <path
                             d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z"
                             fill="var(--primary-color-text)" />
@@ -59,22 +67,28 @@
                     </g>
                     <path
                         d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z"
-                        fill="var(--primary-color-text)"  />
+                        fill="var(--primary-color-text)" />
                     <path
                         d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z"
-                        fill="var(--primary-color-text)"  />
+                        fill="var(--primary-color-text)" />
                     <path fill-rule="evenodd" clip-rule="evenodd"
                         d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
-                        fill="var(--primary-color-text)"  />
-                    <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)"  />
-                    <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)"  />
+                        fill="var(--primary-color-text)" />
+                    <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z"
+                        fill="var(--primary-color-text)" />
+                    <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z"
+                        fill="var(--primary-color-text)" />
                     <path fill-rule="evenodd" clip-rule="evenodd"
                         d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
-                        fill="var(--primary-color-text)"  />
-                    <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)"  />
-                    <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)"  />
-                    <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)"  />
-                    <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)"  />
+                        fill="var(--primary-color-text)" />
+                    <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z"
+                        fill="var(--primary-color-text)" />
+                    <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z"
+                        fill="var(--primary-color-text)" />
+                    <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z"
+                        fill="var(--primary-color-text)" />
+                    <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z"
+                        fill="var(--primary-color-text)" />
                 </svg>
             </a>
         </div>
@@ -85,41 +99,45 @@
             </li>
             <li>
                 <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer"
-                    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">
                     <i class="pi pi-github text-700"></i>
                 </a>
             </li>
             <li>
-                <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" 
-                    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"
-            >
+                <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer"
+                    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">
                     <i class="pi pi-discord text-700"></i>
                 </a>
             </li>
             <li>
                 <a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer"
-                    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">
                     <i class="pi pi-comments text-700"></i>
                 </a>
             </li>
             <li>
-                <button type="button" class="flex flex-shrink-0 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" (click)="toggleDarkMode()">
+                <button type="button"
+                    class="flex flex-shrink-0 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"
+                    (click)="toggleDarkMode()">
                     <i class="pi " [ngClass]="{'pi-moon': isDarkMode, 'pi-sun': !isDarkMode}"></i>
                 </button>
             </li>
             <li *ngIf="showConfigurator" class="relative">
-                <button type="button" class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" (click)="showConfig()">
+                <button type="button"
+                    class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0"
+                    (click)="showConfig()">
                     <i class="pi pi-palette"></i>
                 </button>
             </li>
             <li class="relative">
-                <button pStyleClass="@next" enterClass="hidden" enterActiveClass="scalein" leaveToClass="hidden" leaveActiveClass="fadeout" [hideOnOutsideClick]="true" type="button" class="p-link flex align-items-center surface-card h-2rem px-2 hover:surface-hover border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary">
+                <button pStyleClass="@next" enterClass="hidden" enterActiveClass="scalein" leaveToClass="hidden"
+                    leaveActiveClass="fadeout" [hideOnOutsideClick]="true" type="button"
+                    class="p-link flex align-items-center surface-card h-2rem px-2 hover:surface-hover border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary">
                     <span class="text-900">{{ versions ? versions[0].version : 'Latest' }}</span>
                     <span class="ml-2 pi pi-angle-down text-600"></span>
                 </button>
-                <div class="p-3 surface-overlay hidden absolute top-auto border-round shadow-2 origin-top w-12rem right-0 mt-1">
+                <div
+                    class="p-3 surface-overlay hidden absolute top-auto border-round shadow-2 origin-top w-12rem right-0 mt-1">
                     <ul class="list-none m-0 p-0">
                         <li role="none" *ngFor="let v of versions">
                             <a [href]="v.url" class="block p-2 border-round hover:surface-hover w-full">
@@ -131,13 +149,9 @@
                 </div>
             </li>
             <li *ngIf="showMenuButton" class="menu-button">
-                <button 
-                    type="button" 
-                    class="flex flex-shrink-0 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 menu-button" 
-                    (click)="showMenu()" 
-                    aria-haspopup 
-                    aria-label="Menu"
-                >
+                <button type="button"
+                    class="flex flex-shrink-0 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 menu-button"
+                    (click)="toggleMenu()" aria-haspopup aria-label="Menu">
                     <i class="pi pi-bars"></i>
                 </button>
             </li>

diff --git 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() {