From 67965851e9a73a36ad274984524125579d3044cf Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 13 Jul 2022 16:42:26 +0200
Subject: [PATCH] Fix the behavior of the user menu on window resize

The menu previously did not update its position when the window is resized. It was also not automatically hidden when the window becomes so narrow that the mobile UI is enabled.

See https://www.woltlab.com/community/thread/296237-benutzerbereich-verhalten-bei-fenstergr%C3%B6%C3%9Fenver%C3%A4nderung/
---
 ts/WoltLabSuite/Core/Ui/User/Menu/Manager.ts  | 36 +++++++++++++++++++
 .../WoltLabSuite/Core/Ui/User/Menu/Manager.js | 32 ++++++++++++++++-
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/Manager.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/Manager.ts
index 5161e29679..60d67bbeb2 100644
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/Manager.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/Manager.ts
@@ -14,6 +14,7 @@ import * as Alignment from "../../Alignment";
 import CloseOverlay from "../../CloseOverlay";
 import * as EventHandler from "../../../Event/Handler";
 import DomUtil from "../../../Dom/Util";
+import * as UiScreen from "../../Screen";
 
 let container: HTMLElement | undefined = undefined;
 const providers = new Set<UserMenuProvider>();
@@ -119,6 +120,41 @@ export function registerProvider(provider: UserMenuProvider): void {
         }
       });
     });
+
+    // Update the position of the user menu if the browser is
+    // resized while the menu is visible.
+    window.addEventListener(
+      "resize",
+      () => {
+        providers.forEach((provider) => {
+          const button = provider.getPanelButton();
+          if (button.classList.contains("open")) {
+            const view = getView(provider);
+            setAlignment(view.getElement(), button);
+          }
+        });
+      },
+      { passive: true },
+    );
+
+    UiScreen.on("screen-md-down", {
+      match() {
+        providers.forEach((provider) => {
+          const button = provider.getPanelButton();
+          if (button.classList.contains("open")) {
+            close(provider);
+          }
+        });
+      },
+      setup() {
+        providers.forEach((provider) => {
+          const button = provider.getPanelButton();
+          if (button.classList.contains("open")) {
+            close(provider);
+          }
+        });
+      },
+    });
   }
 
   initProvider(provider);
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Manager.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Manager.js
index 3437b90e94..e7af9aa6f8 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Manager.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Manager.js
@@ -7,7 +7,7 @@
  * @module WoltLabSuite/Core/Ui/User/Menu/Manager
  * @woltlabExcludeBundle tiny
  */
-define(["require", "exports", "tslib", "../../Alignment", "../../CloseOverlay", "../../../Event/Handler", "../../../Dom/Util"], function (require, exports, tslib_1, Alignment, CloseOverlay_1, EventHandler, Util_1) {
+define(["require", "exports", "tslib", "../../Alignment", "../../CloseOverlay", "../../../Event/Handler", "../../../Dom/Util", "../../Screen"], function (require, exports, tslib_1, Alignment, CloseOverlay_1, EventHandler, Util_1, UiScreen) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.registerProvider = exports.getContainer = exports.getUserMenuProviders = void 0;
@@ -15,6 +15,7 @@ define(["require", "exports", "tslib", "../../Alignment", "../../CloseOverlay",
     CloseOverlay_1 = tslib_1.__importDefault(CloseOverlay_1);
     EventHandler = tslib_1.__importStar(EventHandler);
     Util_1 = tslib_1.__importDefault(Util_1);
+    UiScreen = tslib_1.__importStar(UiScreen);
     let container = undefined;
     const providers = new Set();
     const views = new Map();
@@ -98,6 +99,35 @@ define(["require", "exports", "tslib", "../../Alignment", "../../CloseOverlay",
                     }
                 });
             });
+            // Update the position of the user menu if the browser is
+            // resized while the menu is visible.
+            window.addEventListener("resize", () => {
+                providers.forEach((provider) => {
+                    const button = provider.getPanelButton();
+                    if (button.classList.contains("open")) {
+                        const view = getView(provider);
+                        setAlignment(view.getElement(), button);
+                    }
+                });
+            }, { passive: true });
+            UiScreen.on("screen-md-down", {
+                match() {
+                    providers.forEach((provider) => {
+                        const button = provider.getPanelButton();
+                        if (button.classList.contains("open")) {
+                            close(provider);
+                        }
+                    });
+                },
+                setup() {
+                    providers.forEach((provider) => {
+                        const button = provider.getPanelButton();
+                        if (button.classList.contains("open")) {
+                            close(provider);
+                        }
+                    });
+                },
+            });
         }
         initProvider(provider);
     }
-- 
2.20.1