UX: improve experimental sidebar transitions (#17358)

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

@@ -39,9 +39,7 @@ export default Controller.extend({
   },
 
   _mainOutletAnimate() {
-    document
-      .querySelector("#main-outlet")
-      .classList.remove("main-outlet-animate");
+    document.querySelector("body").classList.remove("sidebar-animate");
   },
 
   @action
@@ -49,9 +47,6 @@ export default Controller.extend({
     // enables CSS transitions, but not on did-insert
     document.querySelector("body").classList.add("sidebar-animate");
 
-    // reduces CSS transition jank
-    document.querySelector("#main-outlet").classList.add("main-outlet-animate");
-
     discourseDebounce(this, this._mainOutletAnimate, 250);
 
     this.toggleProperty("showSidebar");

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

@@ -683,11 +683,8 @@ table {
   box-sizing: border-box;
   width: 100%;
   display: grid;
-  // we can CSS transition the sidebar grid width change
-  // as long as we keep the column count consistent
-  // grid transitions are only supported in Firefox at the moment, but coming summer 2022 to Chrome
   grid-template-areas: "sidebar content";
-  grid-template-columns: min-content minmax(0, 1fr);
+  grid-template-columns: 0 minmax(0, 1fr); // 0 column width needs to be set for CSS transitions
   gap: 0;
 
   #main-outlet {

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

@@ -1,22 +1,31 @@
 :root {
-  --d-sidebar-width: 240px;
+  --d-sidebar-width: 16em;
+  --d-sidebar-animation-time: 0.25s;
+  --d-sidebar-animation-ease: ease-in-out;
 }
 
 .header-sidebar-toggle {
-  margin-right: 1em;
+  --toggle-padding: 0.5em;
+  margin-right: 0.75em;
 
   @media screen and (min-width: 1300px) {
     // extending the toggle beyond the page when space allows
     // for better logo alignment with content
     body:not(.has-sidebar-page) & {
       margin-left: -3.7em;
+      transition: margin var(--d-sidebar-animation-speed)
+        var(--d-sidebar-animation-ease);
     }
   }
 
+  .mobile-view & {
+    margin-left: calc(var(--toggle-padding) * -1);
+  }
+
   button {
     position: relative;
     font-size: var(--font-up-2);
-    padding: 0.5em;
+    padding: var(--toggle-padding);
 
     .discourse-no-touch & {
       &:hover {

app/assets/stylesheets/desktop/discourse.scss

@@ -187,6 +187,15 @@ input {
   }
 }
 
+#main-outlet-wrapper {
+  //  grid-template-columns transition supported in Firefox, Chrome support coming summer 2022
+  transition: grid-template-columns var(--d-sidebar-animation-time);
+}
+
+.d-header-wrap .wrap {
+  transition: max-width var(--d-sidebar-animation-time);
+}
+
 body.has-sidebar-page {
   .wrap {
     // increase page max-width to accommodate sidebar width
@@ -203,8 +212,7 @@ body.has-sidebar-page {
 }
 
 body.sidebar-animate {
-  .d-header .wrap,
   #main-outlet-wrapper {
-    transition: ease-in-out 0.5s;
+    transition: all var(--d-sidebar-animation-time);
   }
 }