diff --git a/src/app/layout/app.layout.component.ts b/src/app/layout/app.layout.component.ts
index 6ffab31..4b52dd9 100644
--- a/src/app/layout/app.layout.component.ts
+++ b/src/app/layout/app.layout.component.ts
@@ -27,7 +27,7 @@ export class AppLayoutComponent implements OnDestroy {
             if (!this.menuOutsideClickListener) {
                 this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
                     const isOutsideClicked = !(this.appSidebar.el.nativeElement.isSameNode(event.target) || this.appSidebar.el.nativeElement.contains(event.target) 
-                        || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger'));
+                        || this.appTopbar.menuButton.nativeElement.isSameNode(event.target) || this.appTopbar.menuButton.nativeElement.contains(event.target));
                     
                     if (isOutsideClicked) {
                         this.hideMenu();
@@ -38,7 +38,7 @@ export class AppLayoutComponent implements OnDestroy {
             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)
-                        || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger'));
+                        || this.appTopbar.topbarMenuButton.nativeElement.isSameNode(event.target) || this.appTopbar.topbarMenuButton.nativeElement.contains(event.target));
 
                     if (isOutsideClicked) {
                         this.hideProfileMenu();
diff --git a/src/app/layout/app.topbar.component.html b/src/app/layout/app.topbar.component.html
index efc269a..c748da9 100644
--- a/src/app/layout/app.topbar.component.html
+++ b/src/app/layout/app.topbar.component.html
@@ -4,15 +4,15 @@
         <span>SAKAI</span>
     </a>
 
-    <button class="p-link layout-menu-button layout-topbar-button p-trigger" (click)="layoutService.onMenuToggle()">
+    <button #menubutton class="p-link layout-menu-button layout-topbar-button" (click)="layoutService.onMenuToggle()">
         <i class="pi pi-bars"></i>
     </button>
 
-    <button class="p-link layout-topbar-menu-button layout-topbar-button p-trigger" (click)="layoutService.showProfileSidebar()">
+    <button #topbarmenubutton class="p-link layout-topbar-menu-button layout-topbar-button" (click)="layoutService.showProfileSidebar()">
         <i class="pi pi-ellipsis-v"></i>
     </button>
 
-    <div #menu class="layout-topbar-menu" [ngClass]="{'layout-topbar-menu-mobile-active': layoutService.state.profileSidebarVisible}">
+    <div #topbarmenu class="layout-topbar-menu" [ngClass]="{'layout-topbar-menu-mobile-active': layoutService.state.profileSidebarVisible}">
         <button class="p-link layout-topbar-button">
             <i class="pi pi-calendar"></i>
             <span>Calendar</span>
diff --git a/src/app/layout/app.topbar.component.ts b/src/app/layout/app.topbar.component.ts
index c5750fe..c8e62ab 100644
--- a/src/app/layout/app.topbar.component.ts
+++ b/src/app/layout/app.topbar.component.ts
@@ -10,7 +10,11 @@ export class AppTopBarComponent {
 
     items!: MenuItem[];
 
-    @ViewChild('menu') menu!: ElementRef;
+    @ViewChild('menubutton') menuButton!: ElementRef;
+
+    @ViewChild('topbarmenubutton') topbarMenuButton!: ElementRef;
+
+    @ViewChild('topbarmenu') menu!: ElementRef;
 
     constructor(public layoutService: LayoutService) { }
 }