UX: Docking/undocking sidebar toggles sidebar hamburger dropdown (#17636)

Before this change, undocking the sidebar would just hide the sidebar
from the screen which led people to complain that they "lost" their
sidebar and had to "find" it. With this change, we automatically display
the sidebar hamburger dropdown when you undock the sidebar. Like wise
when the sidebar is docked, the sidebar hamburger dropdown is
automatically collapsed.

app/assets/javascripts/discourse/app/components/site-header.js

@@ -236,17 +236,6 @@ const SiteHeaderComponent = MountWidget.extend(
         this.appEvents.on("user-menu:rendered", this, "_animateMenu");
       }
 
-      if (
-        this.currentUser?.experimental_sidebar_enabled &&
-        !this.site.mobileView
-      ) {
-        this.appEvents.on(
-          "sidebar:docked-state-updated",
-          this,
-          "queueRerender"
-        );
-      }
-
       this.dispatch("notifications:changed", "user-notifications");
       this.dispatch("header:keyboard-trigger", "header");
       this.dispatch("user-menu:navigation", "user-menu");
@@ -363,17 +352,6 @@ const SiteHeaderComponent = MountWidget.extend(
         this.appEvents.off("user-menu:rendered", this, "_animateMenu");
       }
 
-      if (
-        this.currentUser?.experimental_sidebar_enabled &&
-        !this.site.mobileView
-      ) {
-        this.appEvents.off(
-          "sidebar:docked-state-updated",
-          this,
-          "queueRerender"
-        );
-      }
-
       if (this.currentUser) {
         this.currentUser.off("status-changed", this, "queueRerender");
       }

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

@@ -50,9 +50,12 @@ export default Controller.extend({
     discourseDebounce(this, this._mainOutletAnimate, 250);
 
     this.toggleProperty("showSidebar");
-    this.appEvents.trigger("sidebar:docked-state-updated");
 
-    if (!this.site.mobileView) {
+    if (this.site.desktopView) {
+      this.appEvents.trigger("header:keyboard-trigger", {
+        type: "hamburger",
+      });
+
       if (this.showSidebar) {
         this.keyValueStore.removeItem(this.hideSidebarKey);
       } else {

app/assets/javascripts/discourse/app/templates/components/sidebar/footer.hbs

@@ -19,7 +19,7 @@
         @icon="keyboard"
         @class="sidebar-footer-actions-button sidebar-footer-actions-keyboard-shortcuts" />
 
-      {{#if this.site.desktopView}}
+      {{#if (and this.site.desktopView (not @sidebarDocked))}}
         <DButton
           @action={{@toggleSidebar}}
           @icon="thumbtack"

app/assets/javascripts/discourse/app/templates/components/sidebar/hamburger-dropdown.hbs

@@ -4,7 +4,7 @@
       <div class="panel-body-content">
         <div class="sidebar-hamburger-dropdown">
           <Sidebar::Sections @collapsableSections={{false}}/>
-          <Sidebar::Footer @toggleSidebar={{route-action "toggleSidebar"}} @tagName="" />
+          <Sidebar::Footer @toggleSidebar={{route-action "toggleSidebar"}} @sidebarDocked={{@sidebarDocked}} @tagName="" />
         </div>
       </div>
     </div>

app/assets/javascripts/discourse/app/widgets/header.js

@@ -244,34 +244,32 @@ createWidget("header-icons", {
 
     icons.push(search);
 
-    if (!attrs.sidebarDocked) {
+    const hamburger = this.attach("header-dropdown", {
-      const hamburger = this.attach("header-dropdown", {
+      title: "hamburger_menu",
-        title: "hamburger_menu",
+      icon: "bars",
-        icon: "bars",
+      iconId: "toggle-hamburger-menu",
-        iconId: "toggle-hamburger-menu",
+      active: attrs.hamburgerVisible,
-        active: attrs.hamburgerVisible,
+      action: "toggleHamburger",
-        action: "toggleHamburger",
+      href: "",
-        href: "",
+      classNames: ["hamburger-dropdown"],
-        classNames: ["hamburger-dropdown"],
 
-        contents() {
+      contents() {
-          let { currentUser } = this;
+        let { currentUser } = this;
-          if (currentUser && currentUser.reviewable_count) {
+        if (currentUser && currentUser.reviewable_count) {
-            return h(
+          return h(
-              "div.badge-notification.reviewables",
+            "div.badge-notification.reviewables",
-              {
+            {
-                attributes: {
+              attributes: {
-                  title: I18n.t("notifications.reviewable_items"),
+                title: I18n.t("notifications.reviewable_items"),
-                },
               },
-              this.currentUser.reviewable_count
+            },
-            );
+            this.currentUser.reviewable_count
-          }
+          );
-        },
+        }
-      });
+      },
+    });
 
-      icons.push(hamburger);
+    icons.push(hamburger);
-    }
 
     if (attrs.user) {
       icons.push(
@@ -339,12 +337,15 @@ createWidget("revamped-hamburger-menu-wrapper", {
     return { "data-click-outside": true };
   },
 
-  html() {
+  html(attrs) {
     return [
       new RenderGlimmer(
         this,
         "div.widget-component-connector",
-        hbs`<Sidebar::HamburgerDropdown />`
+        hbs`<Sidebar::HamburgerDropdown @sidebarDocked={{@data.sidebarDocked}} />`,
+        {
+          sidebarDocked: attrs.sidebarDocked,
+        }
       ),
     ];
   },
@@ -402,10 +403,6 @@ export default createWidget("header", {
       inTopicRoute = this.router.currentRouteName.startsWith("topic.");
     }
 
-    if (attrs.sidebarDocked) {
-      state.hamburgerVisible = false;
-    }
-
     let contents = () => {
       const headerIcons = this.attach("header-icons", {
         hamburgerVisible: state.hamburgerVisible,
@@ -413,7 +410,6 @@ export default createWidget("header", {
         searchVisible: state.searchVisible,
         ringBackdrop: state.ringBackdrop,
         flagCount: attrs.flagCount,
-        sidebarDocked: attrs.sidebarDocked,
         user: this.currentUser,
       });
 
@@ -431,7 +427,11 @@ export default createWidget("header", {
         );
       } else if (state.hamburgerVisible) {
         if (this.currentUser?.experimental_sidebar_enabled) {
-          panels.push(this.attach("revamped-hamburger-menu-wrapper", {}));
+          panels.push(
+            this.attach("revamped-hamburger-menu-wrapper", {
+              sidebarDocked: attrs.sidebarDocked,
+            })
+          );
         } else {
           panels.push(this.attach("hamburger-menu"));
         }

app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js

@@ -399,9 +399,9 @@ acceptance("Sidebar - Categories Section", function (needs) {
 
     await undockSidebar();
 
-    assert.ok(
+    assert.strictEqual(
-      Object.keys(topicTrackingState.stateChangeCallbacks).length <
+      Object.keys(topicTrackingState.stateChangeCallbacks).length,
-        initialCallbackCount
+      initialCallbackCount
     );
   });
 });

app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js

@@ -755,9 +755,9 @@ acceptance("Sidebar - Community Section", function (needs) {
 
     await undockSidebar();
 
-    assert.ok(
+    assert.strictEqual(
-      Object.keys(topicTrackingState.stateChangeCallbacks).length <
+      Object.keys(topicTrackingState.stateChangeCallbacks).length,
-        initialCallbackCount
+      initialCallbackCount
     );
   });
 });

app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js

@@ -326,9 +326,9 @@ acceptance("Sidebar - Tags section", function (needs) {
 
     await undockSidebar();
 
-    assert.ok(
+    assert.strictEqual(
-      Object.keys(topicTrackingState.stateChangeCallbacks).length <
+      Object.keys(topicTrackingState.stateChangeCallbacks).length,
-        initialCallbackCount
+      initialCallbackCount
     );
   });
 });

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

@@ -90,11 +90,9 @@ acceptance("Sidebar - User with sidebar enabled", function (needs) {
 
     assert.ok(!exists(".sidebar-container"), "hides the sidebar");
 
-    await click(".hamburger-dropdown");
-
     assert.ok(
       exists(".sidebar-hamburger-dropdown"),
-      "displays the sidebar in hamburger dropdown"
+      "displays the sidebar in hamburger dropdown automatically after undocking"
     );
 
     await click("button.sidebar-footer-actions-dock-toggle");
@@ -103,5 +101,22 @@ acceptance("Sidebar - User with sidebar enabled", function (needs) {
       exists(".sidebar-container"),
       "displays the sidebar after docking"
     );
+
+    assert.notOk(
+      exists(".sidebar-hamburger-dropdown"),
+      "hides the sidebar in hamburger dropdown automatically after docking"
+    );
+
+    await click(".hamburger-dropdown");
+
+    assert.ok(
+      exists(".sidebar-hamburger-dropdown"),
+      "displays the sidebar in hamburger dropdown even when sidebar is docked"
+    );
+
+    assert.notOk(
+      exists(".sidebar-hamburger-dropdown .sidebar-footer-actions-dock-toggle"),
+      "does not display sidebar dock toggle in hamburger dropdown when sidebar is docked"
+    );
   });
 });