From 2583d21aa71595f4d8d2256b68ad0c15401a277b Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Thu, 15 Sep 2022 11:35:33 +0800
Subject: [PATCH] UX: Improve styling of sidebar on mobile (#18246)

* Make sidebar footer is sticky
* Ensure that only the sidebar sections is scrollable
---
 .../stylesheets/common/base/sidebar.scss      |  4 ---
 app/assets/stylesheets/mobile/_index.scss     |  1 -
 app/assets/stylesheets/mobile/menu-panel.scss | 31 +++++++++++++++++--
 app/assets/stylesheets/mobile/sidebar.scss    |  8 -----
 4 files changed, 28 insertions(+), 16 deletions(-)
 delete mode 100644 app/assets/stylesheets/mobile/sidebar.scss

diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 6826947b39d..d3c9c2cae1e 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -45,10 +45,6 @@
     box-sizing: border-box;
     flex: 1;
     padding: 1em 0;
-    box-sizing: border-box;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
     overflow-x: hidden;
     overflow-y: overlay;
 
diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss
index f48801bc048..8f7319408dd 100644
--- a/app/assets/stylesheets/mobile/_index.scss
+++ b/app/assets/stylesheets/mobile/_index.scss
@@ -24,7 +24,6 @@
 @import "reviewables";
 @import "ring";
 @import "search";
-@import "sidebar";
 @import "tagging";
 @import "topic-list";
 @import "topic-post";
diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss
index 53ecdf10112..2f5639f334c 100644
--- a/app/assets/stylesheets/mobile/menu-panel.scss
+++ b/app/assets/stylesheets/mobile/menu-panel.scss
@@ -1,5 +1,6 @@
 .hamburger-panel .menu-panel.slide-in {
   left: 0;
+
   .panel-body {
     display: block;
   }
@@ -61,7 +62,7 @@
 
 .panel-body-contents {
   // 2em padding very useful for iOS Safari's overlayed bottom nav
-  padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
+  // padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
 
   .user-menu.revamped & {
     height: 100%;
@@ -69,11 +70,23 @@
 }
 
 .hamburger-panel .revamped {
-  --d-sidebar-row-horizontal-padding: 0.5rem;
+  --d-sidebar-row-horizontal-padding: 1rem;
   --d-sidebar-highlight-color: var(--primary-low);
+  box-sizing: border-box;
+  padding: 0;
+
+  .panel-body-contents {
+    height: 100%;
+
+    .sidebar-hamburger-dropdown {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+  }
 
   .sidebar-row {
-    padding: 0.5rem var(--d-sidebar-row-horizontal-padding);
+    padding: 1.2rem var(--d-sidebar-row-horizontal-padding);
     height: 27px;
     align-items: center;
     font-size: var(--font-0);
@@ -82,4 +95,16 @@
   .sidebar-section-wrapper {
     margin-bottom: 0.5em;
   }
+
+  .sidebar-footer-wrapper {
+    margin-top: 0;
+  }
+
+  .sidebar-sections {
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+  }
 }
diff --git a/app/assets/stylesheets/mobile/sidebar.scss b/app/assets/stylesheets/mobile/sidebar.scss
deleted file mode 100644
index b01ef420c50..00000000000
--- a/app/assets/stylesheets/mobile/sidebar.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.sidebar-footer-wrapper {
-  position: static;
-  margin-top: 1em;
-  .sidebar-footer-container {
-    background: transparent;
-    padding: 0.5em 0.1em;
-  }
-}