UX: add left sidebar toggle when sidebar enabled (#17831)

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

@@ -51,6 +51,10 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
       mobile.toggleMobileView();
     },
 
+    toggleSidebar() {
+      this.controllerFor("application").send("toggleSidebar");
+    },
+
     logout: unlessReadOnly(
       "_handleLogout",
       I18n.t("read_only_mode.logout_disabled")

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

@@ -4,6 +4,13 @@ import hbs from "discourse/widgets/hbs-compiler";
 createWidget("header-contents", {
   tagName: "div.contents.clearfix",
   template: hbs`
+    {{#if this.site.desktopView}}
+      {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
+        {{#if attrs.sidebarEnabled}}
+          {{sidebar-toggle attrs=attrs}}
+        {{/if}}
+      {{/if}}
+    {{/if}}
     {{home-logo attrs=attrs}}
     {{#if attrs.topic}}
       {{header-topic-info attrs=attrs}}

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

@@ -307,7 +307,14 @@ createWidget("header-icons", {
       },
     });
 
-    icons.push(hamburger);
+    if (
+      !this.siteSettings.enable_experimental_sidebar_hamburger ||
+      (this.siteSettings.enable_experimental_sidebar_hamburger &&
+        !attrs.sidebarEnabled) ||
+      this.site.mobileView
+    ) {
+      icons.push(hamburger);
+    }
 
     if (attrs.user) {
       icons.push(
@@ -446,6 +453,7 @@ export default createWidget("header", {
         ringBackdrop: state.ringBackdrop,
         flagCount: attrs.flagCount,
         user: this.currentUser,
+        sidebarEnabled: attrs.sidebarEnabled,
       });
 
       if (attrs.onlyIcons) {

app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js

@@ -0,0 +1,16 @@
+import { createWidget } from "discourse/widgets/widget";
+
+export default createWidget("sidebar-toggle", {
+  tagName: "span.header-sidebar-toggle",
+
+  html() {
+    return [
+      this.attach("button", {
+        title: "",
+        icon: "bars",
+        action: "toggleSidebar",
+        className: "btn btn-flat btn-sidebar-toggle",
+      }),
+    ];
+  },
+});

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

@@ -398,7 +398,7 @@ acceptance("Sidebar - Categories Section", function (needs) {
       topicTrackingState.stateChangeCallbacks
     ).length;
 
-    await click(".hamburger-dropdown");
+    await click(".btn-sidebar-toggle");
 
     assert.ok(
       Object.keys(topicTrackingState.stateChangeCallbacks).length <

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

@@ -930,7 +930,7 @@ acceptance("Sidebar - Community Section", function (needs) {
       topicTrackingState.stateChangeCallbacks
     ).length;
 
-    await click(".hamburger-dropdown");
+    await click(".btn-sidebar-toggle");
 
     assert.ok(
       Object.keys(topicTrackingState.stateChangeCallbacks).length <

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

@@ -344,7 +344,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
       "displays hover button with correct title"
     );
 
-    await click(".hamburger-dropdown");
+    await click(".btn-sidebar-toggle");
 
     assert.strictEqual(
       linkDestroy,

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

@@ -326,7 +326,7 @@ acceptance("Sidebar - Tags section", function (needs) {
       topicTrackingState.stateChangeCallbacks
     ).length;
 
-    await click(".hamburger-dropdown");
+    await click(".btn-sidebar-toggle");
 
     assert.ok(
       Object.keys(topicTrackingState.stateChangeCallbacks).length <

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

@@ -68,7 +68,7 @@ acceptance(
 
       assert.ok(exists(".sidebar-container"), "sidebar is displayed");
 
-      await click(".hamburger-dropdown");
+      await click(".btn-sidebar-toggle");
 
       assert.notOk(
         exists(".sidebar-hamburger-dropdown"),
@@ -77,7 +77,7 @@ acceptance(
 
       assert.notOk(exists(".sidebar-container"), "sidebar is hidden");
 
-      await click(".hamburger-dropdown");
+      await click(".btn-sidebar-toggle");
 
       assert.ok(exists(".sidebar-container"), "sidebar is displayed");
     });
@@ -137,7 +137,7 @@ acceptance(
         "displays the sidebar by default"
       );
 
-      await click(".hamburger-dropdown");
+      await click(".btn-sidebar-toggle");
 
       assert.ok(
         !document.body.classList.contains("has-sidebar-page"),
@@ -146,7 +146,7 @@ acceptance(
 
       assert.ok(!exists(".sidebar-container"), "hides the sidebar");
 
-      await click(".hamburger-dropdown");
+      await click(".btn-sidebar-toggle");
 
       assert.ok(exists(".sidebar-container"), "displays the sidebar");
     });

app/assets/stylesheets/common/base/header.scss

@@ -211,6 +211,31 @@
   }
 }
 
+.header-sidebar-toggle {
+  button {
+    margin-right: 1em;
+    box-sizing: content-box; // matches other header icons
+    display: flex;
+    justify-content: center;
+    width: 2.2857em;
+    height: 2.2857em;
+    padding: 0.2143em;
+    &:focus,
+    .discourse-no-touch & {
+      &:hover {
+        background-color: var(--primary-low);
+      }
+    }
+    .d-icon {
+      width: 100%;
+      font-size: var(--font-up-4);
+      line-height: var(--line-height-large);
+      display: inline-block;
+      color: var(--header_primary-low-mid);
+    }
+  }
+}
+
 .highlight-strong {
   background-color: var(--highlight-medium);
 }