From 59c8774957cc5cc31bfc5126ce415d3e3e0d7b3e Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 5 Jul 2022 22:36:44 -0400
Subject: [PATCH] UX: Prevent experimental sidebar scroll jumps (#17352)

---
 .../app/templates/components/sidebar.hbs      |  2 +-
 app/assets/stylesheets/mobile/discourse.scss  | 60 +++++++++----------
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
index b167b9d7219..16657ad79dc 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
@@ -1,4 +1,4 @@
-<DSection @pageClass="has-sidebar" @class="sidebar-container">
+<DSection @pageClass="has-sidebar" @class="sidebar-container" @scrollTop={{false}}>
   <div class="sidebar-scroll-wrap">
     <Sidebar::TopicsSection />
     <Sidebar::CategoriesSection />
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index 8d01ca96b3b..8f4aadfbf60 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -123,6 +123,12 @@ blockquote {
 
 #main-outlet {
   padding-top: 1.25em;
+  &:after {
+    // setup overlay for sidebar
+    content: "";
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
 }
 
 #main {
@@ -135,56 +141,48 @@ blockquote {
   width: 90%;
 }
 
-#main-outlet-wrapper {
-  width: 100%;
-
-  #main-outlet {
-    &.main-outlet-animate {
-      width: 95vw; // prevents content width shift during animation
-    }
-  }
-}
+// Sidebar styles
 
 .sidebar-wrapper {
   width: 0;
-  transition: width 0.25s ease-in-out;
+  transition: width 0.2s ease-in-out;
+  z-index: z("modal", "content");
+}
+
+#main-outlet-wrapper {
+  grid-template-columns: 0 minmax(0, 100vw);
+  gap: 0;
+  .sidebar-container {
+    padding-bottom: 6.6em; // extra space to watch out for navbar
+  }
 }
 
 body.has-sidebar-page {
-  position: fixed;
-  height: calc(100vh - var(--header-offset));
-
-  #main {
-    overflow: hidden;
+  .d-header-wrap {
+    // edits the z-index when the sidebar is open:
+    // header
+    // sidebar & body overlay
+    // composer
+    z-index: z("modal", "content") + 1;
   }
 
   .sidebar-wrapper {
     width: var(--d-sidebar-width);
+    grid-area: content;
+    margin-left: -10px; // compensate for main-outlet-wrapper padding
   }
 
   #main-outlet {
-    position: relative;
-    width: 95vw; // prevents content width shift during animation
     &:after {
       content: "";
-      background: rgba(0, 0, 0, 0.5);
+      background: rgb(0, 0, 0); // always a black overlay
       position: absolute;
       top: 0;
-      left: -2em; // compensate for gap
+      left: 0;
       right: 0;
       bottom: 0;
-      z-index: z("dropdown");
-    }
-  }
-
-  #main-outlet-wrapper {
-    grid-template-columns: min-content minmax(0, 100vw);
-    gap: 0 2em;
-    padding-left: 0;
-
-    .sidebar-container {
-      padding-bottom: 6.6em;
-      transition: width 0.25s;
+      z-index: z("modal", "overlay");
+      opacity: 0.5;
     }
   }
 }