From 425bebb337c72072b975350970ce017626e1e79c Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Mon, 5 Dec 2022 14:44:50 +1100
Subject: [PATCH] FIX: user menu bug when transit from narrow screen (#19310)

When narrow screen is enable and hamburgerVisible is set to true, transition to wide screen is breaking user-menu button.

We need to reset hamburgerVisible and domClean is a great way to achieve it.
---
 .../discourse/app/components/site-header.js   |  1 +
 .../acceptance/sidebar-narrow-desktop-test.js | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index 73b82710ddc..d1609ca0eef 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -42,6 +42,7 @@ const SiteHeaderComponent = MountWidget.extend(
 
     @observes("site.narrowDesktopView")
     narrowDesktopViewChanged() {
+      this.eventDispatched("dom:clean", "header");
       if (
         this.siteSettings.enable_experimental_sidebar_hamburger &&
         (!this.sidebarEnabled || this.site.narrowDesktopView)
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js
index 60d1f381848..defbd86a7a6 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js
@@ -55,4 +55,30 @@ acceptance("Sidebar - Narrow Desktop", function (needs) {
 
     bodyElement.style.width = null;
   });
+
+  test("transition from narrow screen to wide screen", async function (assert) {
+    await visit("/");
+    await settled();
+
+    const bodyElement = document.querySelector("body");
+    bodyElement.style.width = "990px";
+
+    await waitUntil(
+      () => document.querySelector(".btn-sidebar-toggle.narrow-desktop"),
+      {
+        timeout: 5000,
+      }
+    );
+    await click(".btn-sidebar-toggle");
+
+    bodyElement.style.width = "1200px";
+    await waitUntil(() => document.querySelector("#d-sidebar"), {
+      timeout: 5000,
+    });
+    await click(".header-dropdown-toggle.current-user");
+    $(".header-dropdown-toggle.current-user").click();
+    assert.ok(exists(".quick-access-panel"));
+
+    bodyElement.style.width = null;
+  });
 });