UX: left-align title with content for sidebar (#18202)

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

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

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

@@ -19,7 +19,12 @@
     height: 100%;
 
     .contents {
-      display: flex;
+      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;
+      }
       align-items: center;
       height: 100%;
 
@@ -42,7 +47,14 @@
     }
   }
 
+  .header-logo-wrapper {
+    grid-area: logo-wrapper;
+    display: flex;
+    align-items: center;
+  }
+
   .title {
+    grid-area: logo;
     display: flex;
     align-items: center;
     height: 100%;
@@ -61,6 +73,7 @@
   }
 
   .panel {
+    grid-area: panel;
     position: relative;
     display: flex;
     flex: 0 0 auto;
@@ -212,6 +225,7 @@
 }
 
 .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,19 +199,3 @@ 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);
-    }
-  }
-}