From 33360672a2b3b5706a11c3cc18a3f0b58a77c483 Mon Sep 17 00:00:00 2001
From: ct-krisha <krisha.jetani@codedthemes.com>
Date: Tue, 5 May 2026 12:18:06 +0530
Subject: [PATCH 1/2] fix navbar toggle button in mobile size

---
 src/app/theme/layout/admin/admin.component.ts    | 12 ++++--------
 .../layout/admin/nav-bar/nav-bar.component.ts    | 16 +++++++++++++---
 .../nav-content/nav-item/nav-item.component.ts   |  4 ++--
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts
index b02f75ba..7021fd80 100644
--- a/src/app/theme/layout/admin/admin.component.ts
+++ b/src/app/theme/layout/admin/admin.component.ts
@@ -30,13 +30,11 @@ 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);
+       if (this.navCollapsedMob) {
+      document.querySelector('app-navigation.pcoded-navbar')?.classList.add('mob-open');
     } else {
-      this.navCollapsedMob = !this.navCollapsedMob;
+      document.querySelector('app-navigation.pcoded-navbar')?.classList.remove('mob-open');
     }
   }
 
@@ -48,8 +46,6 @@ export class AdminComponent {
   }
 
   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..6aaaa65f 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, output, HostListener } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 
@@ -45,8 +45,18 @@ 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');
+    if (document.querySelector('app-navigation.pcoded-navbar')?.classList.contains('mob-open')) {
+      this.NavCollapsedMob.emit();
+    }
+  }
+
+  @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..a4847c7e 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
@@ -45,8 +45,8 @@ export class NavItemComponent {
         last_parent.classList.add('active');
       }
     }
-    if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) {
-      document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open');
+    if (document.querySelector('app-navigation.pcoded-navbar')?.classList.contains('mob-open')) {
+      document.getElementById('mobile-collapse1')?.click();
     }
   }
 }

From 7b82d846183b4c4a5e6d131f83412579be61c087 Mon Sep 17 00:00:00 2001
From: ct-krisha <krisha.jetani@codedthemes.com>
Date: Wed, 6 May 2026 12:45:32 +0530
Subject: [PATCH 2/2] PR review changes

---
 src/app/theme/layout/admin/admin.component.ts           | 1 +
 src/app/theme/layout/admin/nav-bar/nav-bar.component.ts | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts
index 7021fd80..8234473a 100644
--- a/src/app/theme/layout/admin/admin.component.ts
+++ b/src/app/theme/layout/admin/admin.component.ts
@@ -47,5 +47,6 @@ export class AdminComponent {
 
   closeMenu() {
     this.navCollapsedMob = false;
+    document.querySelector('app-navigation.pcoded-navbar')?.classList.remove('mob-open');
   }
 }
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 6aaaa65f..48e5600c 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, HostListener } from '@angular/core';
+import { Component, Output, EventEmitter, HostListener } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 
@@ -16,7 +16,7 @@ import { NavRightComponent } from './nav-right/nav-right.component';
 })
 export class NavBarComponent {
   // public props
-  readonly NavCollapsedMob = output();
+  @Output() NavCollapsedMob = new EventEmitter<void>();
   navCollapsedMob;
   headerStyle: string;
   menuClass: boolean;