diff --git a/src/layout/applayout.ts b/src/layout/applayout.ts
index 5bef5fd..acc5103 100644
--- a/src/layout/applayout.ts
+++ b/src/layout/applayout.ts
@@ -49,20 +49,6 @@ export class AppLayout {
                 });
             }
 
-            if (!this.profileMenuOutsideClickListener) {
-                this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
-                    const isOutsideClicked = !(
-                        this.appTopBar.menu.nativeElement.isSameNode(event.target) ||
-                        this.appTopBar.menu.nativeElement.contains(event.target) ||
-                        this.appTopBar.topbarMenuButton.nativeElement.isSameNode(event.target) ||
-                        this.appTopBar.topbarMenuButton.nativeElement.contains(event.target)
-                    );
-
-                    if (isOutsideClicked) {
-                    }
-                });
-            }
-
             if (this.layoutService.layoutState().staticMenuMobileActive) {
                 this.blockBodyScroll();
             }
@@ -73,11 +59,12 @@ export class AppLayout {
         });
     }
 
-    isOutsideClicked(event) {
+    isOutsideClicked(event: MouseEvent) {
         const sidebarEl = document.querySelector('.layout-sidebar');
         const topbarEl = document.querySelector('.layout-menu-button');
+        const eventTarget = event.target as Node;
 
-        return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
+        return !(sidebarEl.isSameNode(eventTarget) || sidebarEl.contains(eventTarget) || topbarEl.isSameNode(eventTarget) || topbarEl.contains(eventTarget));
     }
 
     hideMenu() {
diff --git a/src/layout/apptopbar.ts b/src/layout/apptopbar.ts
index 630d6d8..b2eb2ce 100644
--- a/src/layout/apptopbar.ts
+++ b/src/layout/apptopbar.ts
@@ -44,7 +44,6 @@ import { LayoutService } from '@/src/service/layout/layout.service';
                 </button>
                 <div class="relative">
                     <button
-                        #menubutton
                         class="layout-topbar-action layout-topbar-action-highlight"
                         pStyleClass="@next"
                         enterFromClass="hidden"
@@ -60,7 +59,6 @@ import { LayoutService } from '@/src/service/layout/layout.service';
             </div>
 
             <button
-                #topbarmenubutton
                 class="layout-topbar-menu-button layout-topbar-action"
                 pStyleClass="@next"
                 enterFromClass="hidden"
@@ -72,7 +70,7 @@ import { LayoutService } from '@/src/service/layout/layout.service';
                 <i class="pi pi-ellipsis-v"></i>
             </button>
 
-            <div #topbarmenu class="layout-topbar-menu hidden lg:block">
+            <div class="layout-topbar-menu hidden lg:block">
                 <div class="layout-topbar-menu-content">
                     <button type="button" class="layout-topbar-action">
                         <i class="pi pi-calendar"></i>
@@ -92,17 +90,13 @@ import { LayoutService } from '@/src/service/layout/layout.service';
     </div>`
 })
 export class AppTopBar {
+
     items!: MenuItem[];
 
-    @ViewChild('menubutton') menuButton!: ElementRef;
-
-    @ViewChild('topbarmenubutton') topbarMenuButton!: ElementRef;
-
-    @ViewChild('topbarmenu') menu!: ElementRef;
-
     constructor(public layoutService: LayoutService) {}
 
     toggleDarkMode() {
         this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
     }
+
 }