From fb183c8703b0b92123b90c07a704258ded912436 Mon Sep 17 00:00:00 2001
From: Behrokh Satarnejad <b.satarnejad@openproject.com>
Date: Mon, 28 Oct 2024 16:17:22 +0100
Subject: [PATCH] close menu when the screen is resized and its size is less
 than 1012px

---
 app/views/layouts/base.html.erb                           | 6 ------
 .../src/app/core/main-menu/main-menu-toggle.service.ts    | 8 ++++++++
 2 files changed, 8 insertions(+), 6 deletions(-)

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) {