From 68f556efd4ebbb77ea8ec89bc6a87891410efad5 Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Mon, 19 Feb 2024 11:36:51 +0100
Subject: [PATCH] Increase the breakpoint at which the main menu will be
 collapsed to the Primer `lg` (1012px)

---
 app/views/layouts/base.html.erb                |  4 ++--
 .../src/app/core/browser/device.service.ts     | 10 +++++-----
 .../main-menu/main-menu-toggle.component.ts    |  3 ++-
 .../core/main-menu/main-menu-toggle.service.ts | 18 ++++++++++--------
 .../layout/_main_menu_mobile.sass              |  4 +---
 5 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index b434cb173ad6..bacc8f6534a0 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -158,8 +158,8 @@ See COPYRIGHT and LICENSE files for more details.
     var savedMainMenuWidth = window.OpenProject.guardedLocalStorage("openProject-mainMenuWidth");
     var mainMenuCollapsed =  window.OpenProject.guardedLocalStorage("openProject-mainMenuCollapsed");
 
-    if (window.innerWidth < 768) {
-      // force hide on load for tablet
+    if (window.innerWidth < 1012) {
+      // force hide on load for small desktops
       $('.can-hide-navigation').addClass('hidden-navigation');
     }
 
diff --git a/frontend/src/app/core/browser/device.service.ts b/frontend/src/app/core/browser/device.service.ts
index df4b2af74f1d..163b1fc20d2a 100644
--- a/frontend/src/app/core/browser/device.service.ts
+++ b/frontend/src/app/core/browser/device.service.ts
@@ -2,14 +2,14 @@ import { Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class DeviceService {
-  public mobileWidthTreshold = 544;
-  public tabletWidthTreshold = 768;
+  public mobileWidthThreshold = 544;
+  public smallDesktopWidthThreshold = 1012;
 
   public get isMobile():boolean {
-    return (window.innerWidth < this.mobileWidthTreshold);
+    return (window.innerWidth < this.mobileWidthThreshold);
   }
 
-  public get isTablet():boolean {
-    return (window.innerWidth < this.tabletWidthTreshold);
+  public get isSmallDesktop():boolean {
+    return (window.innerWidth < this.smallDesktopWidthThreshold);
   }
 }
diff --git a/frontend/src/app/core/main-menu/main-menu-toggle.component.ts b/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
index 210af69a2039..ceea03e9ad1c 100644
--- a/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
+++ b/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
@@ -55,7 +55,8 @@ export class MainMenuToggleComponent extends UntilDestroyedMixin implements OnIn
     readonly topMenu:TopMenuService,
     readonly toggleService:MainMenuToggleService,
     readonly cdRef:ChangeDetectorRef,
-    readonly injector:Injector) {
+    readonly injector:Injector,
+  ) {
     super();
   }
 
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 82fbf468e6b8..0a93b7156679 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
@@ -67,9 +67,11 @@ export class MainMenuToggleService {
 
   public changeData$ = this.changeData.asObservable();
 
-  constructor(protected I18n:I18nService,
+  constructor(
+    protected I18n:I18nService,
     public injector:Injector,
-    readonly deviceService:DeviceService) {
+    readonly deviceService:DeviceService,
+  ) {
   }
 
   public initializeMenu():void {
@@ -93,8 +95,8 @@ export class MainMenuToggleService {
       this.saveWidth(this.defaultWidth);
     }
 
-    // tablet version default: hide menu on initialization
-    this.closeWhenOnTablet();
+    // small desktop version default: hide menu on initialization
+    this.closeWhenOnSmallDesktop();
   }
 
   // click on arrow or hamburger icon
@@ -105,7 +107,7 @@ export class MainMenuToggleService {
     }
 
     if (!this.showNavigation) { // sidebar is hidden -> show menu
-      if (this.deviceService.isTablet) { // tablet version
+      if (this.deviceService.isSmallDesktop) { // small desktop version
         this.setWidth(window.innerWidth);
       } else { // desktop version
         const savedWidth = parseInt(window.OpenProject.guardedLocalStorage(this.localStorageKey) as string);
@@ -131,8 +133,8 @@ export class MainMenuToggleService {
     jQuery('.searchable-menu--search-input').blur();
   }
 
-  public closeWhenOnTablet():void {
-    if (this.deviceService.isTablet) {
+  public closeWhenOnSmallDesktop():void {
+    if (this.deviceService.isSmallDesktop) {
       this.closeMenu();
       window.OpenProject.guardedLocalStorage(this.localStorageStateKey, 'false');
     }
@@ -147,7 +149,7 @@ export class MainMenuToggleService {
   public setWidth(width?:any):void {
     if (width !== undefined) {
       // Leave a minimum amount of space for space for the content
-      const maxMenuWidth = this.deviceService.isTablet ? window.innerWidth - 120 : window.innerWidth - 520;
+      const maxMenuWidth = this.deviceService.isSmallDesktop ? window.innerWidth - 120 : window.innerWidth - 520;
       if (width > maxMenuWidth) {
         this.elementWidth = maxMenuWidth;
       } else {
diff --git a/frontend/src/global_styles/layout/_main_menu_mobile.sass b/frontend/src/global_styles/layout/_main_menu_mobile.sass
index 8f5753ec993c..16472733781f 100644
--- a/frontend/src/global_styles/layout/_main_menu_mobile.sass
+++ b/frontend/src/global_styles/layout/_main_menu_mobile.sass
@@ -26,12 +26,10 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-@media screen and (max-width: $breakpoint-md)
+@media screen and (max-width: $breakpoint-lg)
   .main-menu
     @include spot-z-index("main-menu")
-    width: var(--breakpoint-sm)
     position: fixed
-    border-bottom: 1px solid var(--main-menu-border-color)
     border: none
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15)
     min-width: 75vw