diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 482b95179d7b..0895f2c65f53 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -173,12 +173,6 @@ See COPYRIGHT and LICENSE files for more details.
       $('.can-hide-navigation').addClass('hidden-navigation');
     }
 
-    window.addEventListener('resize', function() {
-      if (window.innerWidth < 1012) {
-        $('.can-hide-navigation').addClass('hidden-navigation');
-      }
-    });
-
     if (mainMenuCollapsed === 'true') {
       savedMainMenuWidth = 0;
     }
diff --git a/frontend/src/app/core/main-menu/main-menu-toggle.service.ts b/frontend/src/app/core/main-menu/main-menu-toggle.service.ts
index 6db9707b6dca..62d205426866 100644
--- a/frontend/src/app/core/main-menu/main-menu-toggle.service.ts
+++ b/frontend/src/app/core/main-menu/main-menu-toggle.service.ts
@@ -72,6 +72,8 @@ export class MainMenuToggleService {
     public injector:Injector,
     readonly deviceService:DeviceService,
   ) {
+    // Add resize event listener
+    window.addEventListener('resize', this.onWindowResize.bind(this));
   }
 
   public initializeMenu():void {
@@ -99,6 +101,12 @@ export class MainMenuToggleService {
     this.closeWhenOnSmallDesktop();
   }
 
+  private onWindowResize():void {
+    if (window.innerWidth < 1012) {
+      this.closeMenu();
+    }
+  }
+
   // click on arrow or hamburger icon
   public toggleNavigation(event?:JQuery.TriggeredEvent|Event):void {
     if (event) {