DEV: Move sidebar utility class to body tag (#17259)

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 (

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">

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}}

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");

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;
+}