FIX: toggle sidebar when back from narrow screen (#19215)

When sidebar was enabled before going to narrow screen, it should be brought back when screen is enlarged.

Also, narrow screen value is changed to 1000px instead of 1100px.

app/assets/javascripts/discourse/app/controllers/application.js

@@ -19,10 +19,7 @@ export default Controller.extend({
 
   init() {
     this._super(...arguments);
-    this.showSidebar =
-      this.canDisplaySidebar &&
-      !this.keyValueStore.getItem(HIDE_SIDEBAR_KEY) &&
-      !this.site.narrowDesktopView;
+    this.showSidebar = this.calculateShowSidebar();
   },
 
   @discourseComputed
@@ -101,6 +98,14 @@ export default Controller.extend({
     return enableSidebar;
   },
 
+  calculateShowSidebar() {
+    return (
+      this.canDisplaySidebar &&
+      !this.keyValueStore.getItem(HIDE_SIDEBAR_KEY) &&
+      !this.site.narrowDesktopView
+    );
+  },
+
   @action
   toggleSidebar() {
     // enables CSS transitions, but not on did-insert

app/assets/javascripts/discourse/app/initializers/narrow-desktop.js

@@ -26,9 +26,10 @@ export default {
               "controller:application"
             );
             site.set("narrowDesktopView", newNarrowDesktopView);
-            if (newNarrowDesktopView) {
-              applicationController.set("showSidebar", false);
-            }
+            applicationController.set(
+              "showSidebar",
+              applicationController.calculateShowSidebar()
+            );
             applicationController.appEvents.trigger(
               "site-header:force-refresh"
             );

app/assets/javascripts/discourse/app/lib/narrow-desktop.js

@@ -9,7 +9,7 @@ const NarrowDesktop = {
   },
 
   isNarrowDesktopView(width) {
-    return width < 1100;
+    return width < 1000;
   },
 };
 

app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js

@@ -21,8 +21,12 @@ acceptance("Sidebar - Narrow Desktop", function (needs) {
 
     assert.ok(!exists("#d-sidebar"), "widge sidebar is collapsed");
 
+    await click(".header-sidebar-toggle .btn");
+
+    assert.ok(exists("#d-sidebar"), "wide sidebar is displayed");
+
     const bodyElement = document.querySelector("body");
-    bodyElement.style.width = "1000px";
+    bodyElement.style.width = "990px";
 
     await waitUntil(
       () => document.querySelector(".btn-sidebar-toggle.narrow-desktop"),
@@ -42,6 +46,13 @@ acceptance("Sidebar - Narrow Desktop", function (needs) {
       !exists(".sidebar-hamburger-dropdown"),
       "cloak sidebar is collapsed"
     );
+
+    bodyElement.style.width = "1200px";
+    await waitUntil(() => document.querySelector("#d-sidebar"), {
+      timeout: 5000,
+    });
+    assert.ok(exists("#d-sidebar"), "wide sidebar is displayed");
+
     bodyElement.style.width = null;
   });
 });