DEV: Add `{{hide-application-sidebar}}` helper (#26310)

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

@@ -13,9 +13,10 @@ export default Controller.extend({
   showTop: true,
   router: service(),
   footer: service(),
+  sidebarState: service(),
   showSidebar: false,
-  navigationMenuQueryParamOverride: null,
   sidebarDisabledRouteOverride: false,
+  navigationMenuQueryParamOverride: null,
   showSiteHeader: true,
 
   init() {
@@ -67,31 +68,24 @@ export default Controller.extend({
     document.body.classList.remove("sidebar-animate");
   },
 
-  @discourseComputed(
-    "navigationMenuQueryParamOverride",
-    "siteSettings.navigation_menu",
-    "canDisplaySidebar",
-    "sidebarDisabledRouteOverride"
-  )
-  sidebarEnabled(
-    navigationMenuQueryParamOverride,
-    navigationMenu,
-    canDisplaySidebar,
-    sidebarDisabledRouteOverride
-  ) {
-    if (!canDisplaySidebar) {
+  get sidebarEnabled() {
+    if (!this.canDisplaySidebar) {
       return false;
     }
 
-    if (sidebarDisabledRouteOverride) {
+    if (this.sidebarState.sidebarHidden) {
       return false;
     }
 
-    if (navigationMenuQueryParamOverride === "sidebar") {
+    if (this.sidebarDisabledRouteOverride) {
+      return false;
+    }
+
+    if (this.navigationMenuQueryParamOverride === "sidebar") {
       return true;
     }
 
-    if (navigationMenuQueryParamOverride === "header_dropdown") {
+    if (this.navigationMenuQueryParamOverride === "header_dropdown") {
       return false;
     }
 
@@ -100,7 +94,7 @@ export default Controller.extend({
       return false;
     }
 
-    return navigationMenu === "sidebar";
+    return this.siteSettings.navigation_menu === "sidebar";
   },
 
   calculateShowSidebar() {

app/assets/javascripts/discourse/app/helpers/hide-application-sidebar.js

@@ -0,0 +1,18 @@
+import Helper from "@ember/component/helper";
+import { scheduleOnce } from "@ember/runloop";
+import { service } from "@ember/service";
+
+export default class HideApplicationSidebar extends Helper {
+  @service sidebarState;
+
+  constructor() {
+    super(...arguments);
+    scheduleOnce("afterRender", this, this.registerHider);
+  }
+
+  registerHider() {
+    this.sidebarState.registerHider(this);
+  }
+
+  compute() {}
+}

app/assets/javascripts/discourse/app/mixins/disable-sidebar.js

@@ -1,7 +1,13 @@
 import Mixin from "@ember/object/mixin";
+import deprecated from "discourse-common/lib/deprecated";
 
 export default Mixin.create({
   activate() {
+    deprecated(
+      "The DisableSidebar mixin is deprecated. Instead, please add the {{hide-application-sidebar}} helper to an Ember template.",
+      { id: "discourse.hide-application-sidebar" }
+    );
+
     this.controllerFor("application").setProperties({
       sidebarDisabledRouteOverride: true,
     });

app/assets/javascripts/discourse/app/routes/invites-show.js

@@ -1,10 +1,9 @@
 import PreloadStore from "discourse/lib/preload-store";
-import DisableSidebar from "discourse/mixins/disable-sidebar";
 import DiscourseRoute from "discourse/routes/discourse";
 import { deepMerge } from "discourse-common/lib/object";
 import I18n from "discourse-i18n";
 
-export default DiscourseRoute.extend(DisableSidebar, {
+export default DiscourseRoute.extend({
   titleToken() {
     return I18n.t("invites.accept_title");
   },

app/assets/javascripts/discourse/app/routes/second-factor-auth.js

@@ -1,10 +1,9 @@
 import { ajax } from "discourse/lib/ajax";
 import { extractError } from "discourse/lib/ajax-error";
 import PreloadStore from "discourse/lib/preload-store";
-import DisableSidebar from "discourse/mixins/disable-sidebar";
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend(DisableSidebar, {
+export default DiscourseRoute.extend({
   queryParams: {
     nonce: { refreshModel: true },
   },

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

@@ -1,8 +1,7 @@
 import Route from "@ember/routing/route";
-import DisableSidebar from "discourse/mixins/disable-sidebar";
 import Wizard from "discourse/static/wizard/models/wizard";
 
-export default class WizardRoute extends Route.extend(DisableSidebar) {
+export default class WizardRoute extends Route {
   model() {
     return Wizard.load();
   }

app/assets/javascripts/discourse/app/services/sidebar-state.js

@@ -1,6 +1,8 @@
 import { tracked } from "@glimmer/tracking";
 import { A } from "@ember/array";
+import { registerDestructor } from "@ember/destroyable";
 import Service, { service } from "@ember/service";
+import { TrackedSet } from "@ember-compat/tracked-built-ins";
 import { disableImplicitInjections } from "discourse/lib/implicit-injections";
 import {
   currentPanelKey,
@@ -23,12 +25,25 @@ export default class SidebarState extends Service {
   @tracked collapsedSections = A([]);
 
   previousState = {};
+  #hiders = new TrackedSet();
 
   constructor() {
     super(...arguments);
     this.#reset();
   }
 
+  get sidebarHidden() {
+    return this.#hiders.size > 0;
+  }
+
+  registerHider(ref) {
+    this.#hiders.add(ref);
+
+    registerDestructor(ref, () => {
+      this.#hiders.delete(ref);
+    });
+  }
+
   setPanel(name) {
     if (this.currentPanelKey) {
       this.setPreviousState();

app/assets/javascripts/discourse/app/templates/invites/show.hbs

@@ -1,4 +1,5 @@
 {{body-class "invite-page"}}
+{{hide-application-sidebar}}
 
 <section>
   <div class="container invites-show clearfix">

app/assets/javascripts/discourse/app/templates/second-factor-auth.hbs

@@ -1,3 +1,5 @@
+{{hide-application-sidebar}}
+
 {{#if this.message}}
   <div class="alert {{this.alertClass}}">{{this.message}}</div>
 {{/if}}

app/assets/javascripts/discourse/app/templates/wizard.gjs

@@ -1,8 +1,10 @@
 import RouteTemplate from "ember-route-template";
 import hideApplicationFooter from "discourse/helpers/hide-application-footer";
+import hideApplicationSidebar from "discourse/helpers/hide-application-sidebar";
 import DiscourseLogo from "discourse/static/wizard/components/discourse-logo";
 
 export default RouteTemplate(<template>
+  {{hideApplicationSidebar}}
   {{hideApplicationFooter}}
   <div id="wizard-main">
     <DiscourseLogo />