close menu when the screen is resized and its size is less than 1012px

opf · Oct 28, 2024 · fb183c8 · fb183c8
1 parent 6a074fe
commit fb183c8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git 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
@@ -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) {