diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts
index b02f75b..8234473 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,7 @@ 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;
+    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 01b10a7..48e5600 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, 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;
@@ -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 24851bc..a4847c7 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();
     }
   }
 }