Revert header sidebar change 0ef68f5 (#18241)

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

@@ -2,18 +2,16 @@ import { createWidget } from "discourse/widgets/widget";
 import hbs from "discourse/widgets/hbs-compiler";
 
 createWidget("header-contents", {
-  tagName: "div.contents",
+  tagName: "div.contents.clearfix",
   template: hbs`
-    <div class="header-logo-wrapper">
-      {{#if this.site.desktopView}}
-        {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
-          {{#if attrs.sidebarEnabled}}
-            {{sidebar-toggle attrs=attrs}}
-          {{/if}}
+    {{#if this.site.desktopView}}
+      {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
+        {{#if attrs.sidebarEnabled}}
+          {{sidebar-toggle attrs=attrs}}
         {{/if}}
       {{/if}}
-      {{home-logo attrs=attrs}}
-    </div>
+    {{/if}}
+    {{home-logo attrs=attrs}}
     {{#if attrs.topic}}
       {{header-topic-info attrs=attrs}}
     {{/if}}

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

@@ -19,12 +19,7 @@
     height: 100%;
 
     .contents {
-      display: grid;
-      grid-template-areas: "logo-wrapper extra-info panel";
-      grid-template-columns: auto 1fr auto;
-      .has-sidebar-page & {
-        grid-template-columns: minmax(var(--d-sidebar-width), auto) 1fr auto;
-      }
+      display: flex;
       align-items: center;
       height: 100%;
 
@@ -47,12 +42,6 @@
     }
   }
 
-  .header-logo-wrapper {
-    grid-area: logo-wrapper;
-    display: flex;
-    align-items: center;
-  }
-
   .title {
     display: flex;
     align-items: center;
@@ -72,7 +61,6 @@
   }
 
   .panel {
-    grid-area: panel;
     position: relative;
     display: flex;
     flex: 0 0 auto;
@@ -224,7 +212,6 @@
 }
 
 .header-sidebar-toggle {
-  grid-area: hamburger;
   button {
     margin-right: 1em;
     box-sizing: content-box; // matches other header icons

app/assets/stylesheets/desktop/discourse.scss

@@ -199,3 +199,19 @@ body.has-sidebar-page {
     padding-left: 0;
   }
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  body.sidebar-animate {
+    #main-outlet-wrapper {
+      //  grid-template-columns transition supported in Firefox, Chrome support coming summer 2022
+      transition-property: grid-template-columns, max-width;
+      transition-timing-function: var(--d-sidebar-animation-ease);
+      transition-duration: var(--d-sidebar-animation-time);
+    }
+
+    .d-header-wrap .wrap {
+      transition: max-width var(--d-sidebar-animation-time)
+        var(--d-sidebar-animation-ease);
+    }
+  }
+}