From 836b5300fc0379805d0b72cd6f81b717f78fa08a Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Tue, 28 Jun 2022 23:32:06 +0800
Subject: [PATCH] DEV: Move sidebar utility class to body tag (#17259)

---
 .../discourse/app/controllers/application.js  |  5 ----
 .../discourse/app/templates/application.hbs   |  6 ++--
 .../app/templates/components/sidebar.hbs      | 24 ++++++++--------
 .../tests/acceptance/sidebar-test.js          | 28 +++++++++++++------
 app/assets/stylesheets/desktop/discourse.scss | 12 ++++----
 5 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/application.js b/app/assets/javascripts/discourse/app/controllers/application.js
index c07ca32adc9..5dcdab3097b 100644
--- a/app/assets/javascripts/discourse/app/controllers/application.js
+++ b/app/assets/javascripts/discourse/app/controllers/application.js
@@ -8,11 +8,6 @@ export default Controller.extend({
   router: service(),
   showSidebar: true,
 
-  @discourseComputed("showSidebar", "currentUser.experimental_sidebar_enabled")
-  mainOutletWrapperClasses(showSidebar, experimentalSidebarEnabled) {
-    return showSidebar && experimentalSidebarEnabled ? "has-sidebar" : "";
-  },
-
   @discourseComputed
   canSignUp() {
     return (
diff --git a/app/assets/javascripts/discourse/app/templates/application.hbs b/app/assets/javascripts/discourse/app/templates/application.hbs
index 7e16b0f9106..1a8cf13f5e0 100644
--- a/app/assets/javascripts/discourse/app/templates/application.hbs
+++ b/app/assets/javascripts/discourse/app/templates/application.hbs
@@ -15,9 +15,9 @@
 
   {{plugin-outlet name="below-site-header" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
 
-  <div id="main-outlet-wrapper" class="wrap {{mainOutletWrapperClasses}}" role="main">
-    {{#if currentUser.experimental_sidebar_enabled}}
-      <Sidebar @shouldDisplay={{showSidebar}} />
+  <div id="main-outlet-wrapper" class="wrap" role="main">
+    {{#if (and currentUser.experimental_sidebar_enabled showSidebar)}}
+      <Sidebar />
     {{/if}}
 
     <div id="main-outlet">
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
index ee690e68081..1f1e8160fa3 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
@@ -1,16 +1,14 @@
-{{#if @shouldDisplay}}
-  <div class="sidebar-wrapper">
-    <div class="sidebar-container">
-      <Sidebar::TopicsSection />
-      <Sidebar::CategoriesSection />
+{{#d-section pageClass="has-sidebar" class="sidebar-wrapper"}}
+  <div class="sidebar-container">
+    <Sidebar::TopicsSection />
+    <Sidebar::CategoriesSection />
 
-      {{#if this.siteSettings.tagging_enabled}}
-        <Sidebar::TagsSection />
-      {{/if}}
+    {{#if this.siteSettings.tagging_enabled}}
+      <Sidebar::TagsSection />
+    {{/if}}
 
-      {{#if this.siteSettings.enable_personal_messages}}
-        <Sidebar::MessagesSection />
-      {{/if}}
-    </div>
+    {{#if this.siteSettings.enable_personal_messages}}
+      <Sidebar::MessagesSection />
+    {{/if}}
   </div>
-{{/if}}
+{{/d-section}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js
index 69424130d52..eb05d0b5749 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-test.js
@@ -8,7 +8,12 @@ acceptance("Sidebar - Anon User", function () {
   test("sidebar is not displayed", async function (assert) {
     await visit("/");
 
-    assert.ok(!exists("#main-outlet-wrapper.has-sidebar"));
+    assert.strictEqual(
+      document.querySelectorAll("body.has-sidebar-page").length,
+      0,
+      "does not add sidebar utility class to body"
+    );
+
     assert.ok(!exists(".sidebar-wrapper"));
   });
 });
@@ -19,7 +24,12 @@ acceptance("Sidebar - User with sidebar disabled", function (needs) {
   test("sidebar is not displayed", async function (assert) {
     await visit("/");
 
-    assert.ok(!exists("#main-outlet-wrapper.has-sidebar"));
+    assert.strictEqual(
+      document.querySelectorAll("body.has-sidebar-page").length,
+      0,
+      "does not add sidebar utility class to body"
+    );
+
     assert.ok(!exists(".sidebar-wrapper"));
   });
 });
@@ -30,18 +40,20 @@ acceptance("Sidebar - User with sidebar enabled", function (needs) {
   test("hiding and displaying sidebar", async function (assert) {
     await visit("/");
 
-    assert.ok(
-      exists("#main-outlet-wrapper.has-sidebar"),
-      "adds sidebar utility class on main outlet wrapper"
+    assert.strictEqual(
+      document.querySelectorAll("body.has-sidebar-page").length,
+      1,
+      "adds sidebar utility class to body"
     );
 
     assert.ok(exists(".sidebar-wrapper"), "displays the sidebar by default");
 
     await click(".header-sidebar-toggle .btn");
 
-    assert.ok(
-      !exists("#main-outlet-wrapper.has-sidebar"),
-      "removes sidebar utility class from main outlet wrapper"
+    assert.strictEqual(
+      document.querySelectorAll("body.has-sidebar-page").length,
+      0,
+      "removes sidebar utility class to body"
     );
 
     assert.ok(!exists(".sidebar-wrapper"), "hides the sidebar");
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 22ad6fb6be8..cdd053d58db 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -191,13 +191,13 @@ input {
   grid-template-columns: minmax(0, 1fr);
   gap: 0;
 
-  &.has-sidebar {
-    grid-template-areas: "sidebar content";
-    grid-template-columns: 240px 1fr;
-    gap: 0 2em;
-  }
-
   #main-outlet {
     grid-area: content;
   }
 }
+
+body.has-sidebar-page #main-outlet-wrapper {
+  grid-template-areas: "sidebar content";
+  grid-template-columns: 240px 1fr;
+  gap: 0 2em;
+}