Revert "DEV: First desktop design interface pass at experimental sidebar (#16590)" (#16646)

This reverts commit 36dcf80aff.

app/assets/javascripts/discourse/app/components/sidebar.js

@@ -1,3 +0,0 @@
-import GlimmerComponent from "discourse/components/glimmer";
-
-export default class Sidebar extends GlimmerComponent {}

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

@@ -6,12 +6,6 @@ export default Controller.extend({
   showTop: true,
   showFooter: false,
   router: service(),
-  showSidebar: true,
-
-  @discourseComputed("showSidebar", "currentUser.experimental_sidebar_enabled")
-  mainOutletWrapperClasses(showSidebar, experimentalSidebarEnabled) {
-    return showSidebar && experimentalSidebarEnabled ? "has-sidebar" : "";
-  },
 
   @discourseComputed
   canSignUp() {

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

@@ -37,10 +37,6 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
       });
     },
 
-    toggleSidebar() {
-      this.controllerFor("application").toggleProperty("showSidebar");
-    },
-
     toggleMobileView() {
       mobile.toggleMobileView();
     },

app/assets/javascripts/discourse/app/templates/application.hbs

@@ -8,34 +8,26 @@
                 showKeyboard=(route-action "showKeyboardShortcutsHelp")
                 toggleMobileView=(route-action "toggleMobileView")
                 toggleAnonymous=(route-action "toggleAnonymous")
-                logout=(route-action "logout")
+                logout=(route-action "logout")}}
-                toggleSidebar=(route-action "toggleSidebar")
-                }}
   {{software-update-prompt}}
 
   {{plugin-outlet name="below-site-header" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
 
-  <div id="main-outlet-wrapper" class="wrap {{mainOutletWrapperClasses}}" role="main">
+  <div id="main-outlet" class="wrap" role="main">
-    {{#if currentUser.experimental_sidebar_enabled}}
+    {{plugin-outlet name="above-main-container" connectorTagName="div"}}
-      <Sidebar @shouldDisplay={{showSidebar}} />
+    <div class="container" id="main-container">
-    {{/if}}
+      {{#if showTop}}
-
+        {{custom-html name="top"}}
-    <div id="main-outlet">
+      {{/if}}
-      {{plugin-outlet name="above-main-container" connectorTagName="div"}}
+      {{notification-consent-banner}}
-      <div class="container" id="main-container">
+      {{pwa-install-banner}}
-        {{#if showTop}}
+      {{global-notice}}
-          {{custom-html name="top"}}
+      {{create-topics-notice}}
-        {{/if}}
+      {{plugin-outlet name="top-notices" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
-        {{notification-consent-banner}}
-        {{pwa-install-banner}}
-        {{global-notice}}
-        {{create-topics-notice}}
-        {{plugin-outlet name="top-notices" connectorTagName="div" args=(hash currentPath=router._router.currentPath)}}
-      </div>
-
-      {{outlet}}
-      {{outlet "user-card"}}
     </div>
+
+    {{outlet}}
+    {{outlet "user-card"}}
   </div>
 
   {{plugin-outlet name="above-footer" connectorTagName="div" args=(hash showFooter=showFooter)}}

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

@@ -1,6 +0,0 @@
-{{#if @shouldDisplay}}
-  <div class="sidebar-wrapper">
-    <div class="sidebar-container">
-    </div>
-  </div>
-{{/if}}

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

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

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

@@ -400,12 +400,7 @@ export default createWidget("header", {
       return panels;
     };
 
-    let contentsAttrs = {
+    let contentsAttrs = { contents, minimized: !!attrs.topic };
-      contents,
-      minimized: !!attrs.topic,
-      sidebarEnabled: this.currentUser?.experimental_sidebar_enabled,
-    };
-
     return h(
       "div.wrap",
       this.attach("header-contents", Object.assign({}, attrs, contentsAttrs))

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

@@ -1,16 +0,0 @@
-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",
-      }),
-    ];
-  },
-});

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

@@ -1,65 +0,0 @@
-import { click, visit } from "@ember/test-helpers";
-import {
-  acceptance,
-  conditionalTest,
-  exists,
-} from "discourse/tests/helpers/qunit-helpers";
-import { test } from "qunit";
-import { isLegacyEmber } from "discourse-common/config/environment";
-
-acceptance("Sidebar - Anon User", function () {
-  // Don't show sidebar for anon user until we know what we want to display
-  test("sidebar is not displayed", async function (assert) {
-    await visit("/");
-
-    assert.ok(!exists("#main-outlet-wrapper.has-sidebar"));
-    assert.ok(!exists(".sidebar-wrapper"));
-  });
-});
-
-acceptance("Sidebar - User with sidebar disabled", function (needs) {
-  needs.user({ experimental_sidebar_enabled: false });
-
-  conditionalTest(
-    "sidebar is not displayed",
-    !isLegacyEmber(),
-    async function (assert) {
-      await visit("/");
-
-      assert.ok(!exists("#main-outlet-wrapper.has-sidebar"));
-      assert.ok(!exists(".sidebar-wrapper"));
-    }
-  );
-});
-
-acceptance("Sidebar - User with sidebar enabled", function (needs) {
-  needs.user({ experimental_sidebar_enabled: true });
-
-  conditionalTest(
-    "hiding and displaying sidebar",
-    !isLegacyEmber(),
-    async function (assert) {
-      await visit("/");
-
-      assert.ok(
-        exists("#main-outlet-wrapper.has-sidebar"),
-        "adds sidebar utility class on main outlet wrapper"
-      );
-
-      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.ok(!exists(".sidebar-wrapper"), "hides the sidebar");
-
-      await click(".header-sidebar-toggle .btn");
-
-      assert.ok(exists(".sidebar-wrapper"), "displays the sidebar");
-    }
-  );
-});

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

@@ -44,7 +44,6 @@
 @import "search";
 @import "share_link";
 @import "shared-drafts";
-@import "sidebar";
 @import "tagging";
 @import "tooltip";
 @import "topic-admin-menu";

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

@@ -651,7 +651,6 @@ table {
 
 #main-outlet {
   padding-top: 2.5em;
-  grid-area: content;
 }
 
 #main {

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

@@ -14,6 +14,7 @@
   backface-visibility: hidden; /** do magic for scrolling performance **/
 
   > .wrap {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
 

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

@@ -1,40 +0,0 @@
-.header-sidebar-toggle {
-  margin-right: 1em;
-  margin-left: -10px;
-
-  button {
-    position: relative;
-    font-size: var(--font-up-2);
-
-    .discourse-no-touch & {
-      &:hover {
-        background: var(--primary-low);
-        .d-icon {
-          color: var(--primary-medium);
-        }
-      }
-    }
-  }
-}
-
-.sidebar-wrapper {
-  grid-area: sidebar;
-  position: sticky;
-  top: var(--header-offset);
-  height: calc(100vh - var(--header-offset));
-  align-self: start;
-  overflow-y: auto;
-  background-color: var(--primary-very-low);
-}
-
-.sidebar-container {
-  box-sizing: border-box;
-  height: 100%;
-  width: 240px;
-  padding: 1em;
-}
-
-.sidebar-toggle {
-  display: flex;
-  justify-content: flex-end;
-}

app/assets/stylesheets/desktop/discourse.scss

@@ -182,16 +182,3 @@ input {
     min-width: 0;
   }
 }
-
-#main-outlet-wrapper {
-  display: grid;
-  grid-template-areas: "content";
-  grid-template-columns: 1fr;
-  gap: 0;
-
-  &.has-sidebar {
-    grid-template-areas: "sidebar content";
-    grid-template-columns: 240px 1fr;
-    gap: 0 2em;
-  }
-}