From 0ac63a85106fd09ebafaf052858c15211d98ab3c Mon Sep 17 00:00:00 2001 From: ct-nensy Date: Tue, 5 May 2026 13:07:21 +0530 Subject: [PATCH 1/3] navbar mobile media issue fix --- src/app/theme/layout/admin/admin.component.ts | 16 ++++------------ .../layout/admin/nav-bar/nav-bar.component.ts | 17 +++++++++++++---- .../nav-content/nav-item/nav-item.component.ts | 2 +- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts index b02f75ba..6434cf44 100644 --- a/src/app/theme/layout/admin/admin.component.ts +++ b/src/app/theme/layout/admin/admin.component.ts @@ -1,5 +1,5 @@ // angular import -import { Component } from '@angular/core'; +import { Component, HostListener } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; @@ -30,14 +30,7 @@ export class AdminComponent { // public method navMobClick() { - if (this.navCollapsedMob && !document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - this.navCollapsedMob = !this.navCollapsedMob; - setTimeout(() => { - this.navCollapsedMob = !this.navCollapsedMob; - }, 100); - } else { - this.navCollapsedMob = !this.navCollapsedMob; - } + this.navCollapsedMob = !this.navCollapsedMob; } // this is for eslint rule @@ -47,9 +40,8 @@ export class AdminComponent { } } + @HostListener('document:closeMobMenu') closeMenu() { - if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); - } + this.navCollapsedMob = false; } } diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts index 01b10a7e..6fd7f3b3 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts @@ -1,5 +1,5 @@ // angular import -import { Component, output } from '@angular/core'; +import { Component, HostListener, input, output } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; @@ -17,14 +17,13 @@ import { NavRightComponent } from './nav-right/nav-right.component'; export class NavBarComponent { // public props readonly NavCollapsedMob = output(); - navCollapsedMob; + navCollapsedMob = input(false); headerStyle: string; menuClass: boolean; collapseStyle: string; // constructor constructor() { - this.navCollapsedMob = false; this.headerStyle = ''; this.menuClass = false; this.collapseStyle = 'none'; @@ -46,7 +45,17 @@ export class NavBarComponent { closeMenu() { if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); + document.dispatchEvent(new Event('closeMobMenu')); + } + } + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent) { + const target = event.target as HTMLElement; + if (this.menuClass && !target.closest('#mobile-header') && !target.closest('.navbar-collapse')) { + this.menuClass = false; + this.headerStyle = ''; + this.collapseStyle = 'none'; } } } diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts index 24851bc8..cca3ab56 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts @@ -46,7 +46,7 @@ export class NavItemComponent { } } if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); + document.dispatchEvent(new Event('closeMobMenu')); } } } From d704891f32e86546dbe9fe86c8ce5948e505b608 Mon Sep 17 00:00:00 2001 From: ct-nensy Date: Wed, 6 May 2026 12:45:20 +0530 Subject: [PATCH 2/3] PR review changes --- src/app/theme/layout/admin/admin.component.ts | 6 ++++++ .../theme/layout/admin/nav-bar/nav-bar.component.ts | 12 ++++++------ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts index 6434cf44..e6fc0d05 100644 --- a/src/app/theme/layout/admin/admin.component.ts +++ b/src/app/theme/layout/admin/admin.component.ts @@ -30,6 +30,11 @@ export class AdminComponent { // public method navMobClick() { + if (this.navCollapsedMob && !document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { + document.querySelector('app-navigation.pcoded-navbar').classList.add('mob-open'); + } else { + document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); + } this.navCollapsedMob = !this.navCollapsedMob; } @@ -42,6 +47,7 @@ export class AdminComponent { @HostListener('document:closeMobMenu') closeMenu() { + document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open'); this.navCollapsedMob = false; } } diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts index 6fd7f3b3..b6501ff5 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts @@ -1,5 +1,5 @@ // angular import -import { Component, HostListener, input, output } from '@angular/core'; +import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; @@ -16,8 +16,8 @@ import { NavRightComponent } from './nav-right/nav-right.component'; }) export class NavBarComponent { // public props - readonly NavCollapsedMob = output(); - navCollapsedMob = input(false); + @Output() readonly NavCollapsedMob = new EventEmitter(); + @Input() navCollapsedMob = false; headerStyle: string; menuClass: boolean; collapseStyle: string; @@ -44,9 +44,9 @@ export class NavBarComponent { } closeMenu() { - if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) { - document.dispatchEvent(new Event('closeMobMenu')); - } + // this.menuClass = false; + // this.headerStyle = ''; + // this.collapseStyle = 'none'; } @HostListener('document:click', ['$event']) From 1aeb7119b7bee7aa88654324678c7c631e9271bc Mon Sep 17 00:00:00 2001 From: ct-nensy Date: Wed, 6 May 2026 12:47:51 +0530 Subject: [PATCH 3/3] PR review changes --- src/app/theme/layout/admin/nav-bar/nav-bar.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts index b6501ff5..7a5f5b25 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts @@ -44,9 +44,9 @@ export class NavBarComponent { } closeMenu() { - // this.menuClass = false; - // this.headerStyle = ''; - // this.collapseStyle = 'none'; + if (document.querySelector('app-navigation.pcoded-navbar')?.classList.contains('mob-open')) { + document.dispatchEvent(new Event('closeMobMenu')); + } } @HostListener('document:click', ['$event'])