From 5b2f5a455e1adf8ce5e8c1cfb7fbc3c388d3d82a Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Wed, 5 Jan 2022 10:40:18 -0600
Subject: [PATCH] UX: Sidebar fixes (#18)

---
 common/common.scss | 36 ++++++++---------
 scss/sidebar.scss  | 99 +++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 115 insertions(+), 20 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index 7389b5c..c98aaa4 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -27,16 +27,16 @@
     .d-toc-item {
       padding: 6px 0;
       a {
-        color: var(--primary-high, $primary-high);
+        color: var(--primary-high);
       }
       &.d-toc-active {
         position: relative;
         &:before {
           :not(.rtl) & {
-            border-left: 1px solid var(--tertiary, $tertiary);
+            border-left: 1px solid var(--tertiary);
           }
           .rtl & {
-            border-right: 1px solid var(--tertiary, $tertiary);
+            border-right: 1px solid var(--tertiary);
           }
           height: 100%;
           content: "";
@@ -45,9 +45,9 @@
           top: 0;
         }
         a {
-          color: var(--primary, $primary);
-          text-shadow: 0.1px 0.1px var(--primary, $primary),
-            -0.1px -0.1px var(--primary, $primary);
+          color: var(--primary);
+          text-shadow: 0.1px 0.1px var(--primary),
+            -0.1px -0.1px var(--primary);
         }
       }
     }
@@ -201,17 +201,17 @@
       }
       > .row {
         :not(.rtl) & {
-          border-right: 1px solid var(--primary-low, $primary-low);
+          border-right: 1px solid var(--primary-low);
         }
         .rtl & {
-          border-left: 1px solid var(--primary-low, $primary-low);
+          border-left: 1px solid var(--primary-low);
         }
       }
     }
     #topic-title {
       margin-bottom: 0;
       .title-wrapper {
-        border-bottom: 1px solid var(--primary-low, $primary-low);
+        border-bottom: 1px solid var(--primary-low);
         padding-bottom: 0.5em;
         width: auto;
       }
@@ -230,7 +230,7 @@
     }
     #d-toc {
       z-index: z("header") + 1;
-      background: var(--secondary, $secondary);
+      background: var(--secondary);
       position: fixed;
       right: 0;
       top: 0;
@@ -265,7 +265,7 @@
     }
     .d-toc-close-wrapper {
       height: 3em;
-      background: var(--secondary, $secondary);
+      background: var(--secondary);
       color: var(--primary-med-or-secondary-med);
       margin-bottom: 1em;
       position: -webkit-sticky;
@@ -283,8 +283,8 @@
       bottom: 5px;
 
       padding: 0.5em 1em;
-      background: var(--tertiary, $tertiary);
-      color: var(--secondary, $secondary);
+      background: var(--tertiary);
+      color: var(--secondary);
       z-index: 3;
       margin-bottom: env(safe-area-inset-bottom);
       :not(.rtl) & {
@@ -300,11 +300,11 @@
     #d-toc > ul {
       :not(.rtl) & {
         margin-left: 20px;
-        border-left: 1px solid var(--primary-low, $primary-low);
+        border-left: 1px solid var(--primary-low);
       }
       .rtl & {
         margin-right: 20px;
-        border-right: 1px solid var(--primary-low, $primary-low);
+        border-right: 1px solid var(--primary-low);
       }
       &:last-child {
         margin-bottom: 5em;
@@ -330,9 +330,9 @@
 }
 
 .edit-title .d-editor-preview [data-theme-toc] {
-  background: var(--tertiary, $tertiary);
-  color: var(--secondary, $secondary);
-  border-top: 2px solid var(--secondary, $secondary);
+  background: var(--tertiary);
+  color: var(--secondary);
+  border-top: 2px solid var(--secondary);
   position: -webkit-sticky;
   position: sticky;
   top: 0;
diff --git a/scss/sidebar.scss b/scss/sidebar.scss
index c8e1696..40bc052 100644
--- a/scss/sidebar.scss
+++ b/scss/sidebar.scss
@@ -1,7 +1,102 @@
 .discourse-sidebar .d-toc-regular .d-toc-article .row {
   width: 75%;
-  @media screen and (max-width: 1200px) {
-    width: 65%;
+  @media screen and (max-width: calc($large-width + 100px)) {
+    width: calc(100vw - 240px - 3em);
+  }
+}
+
+@media screen and (max-width: calc($large-width + 100px)) {
+  .discourse-sidebar {
+    .d-toc-regular {
+      .post-bottom-wrapper {
+        padding: 1em 0.75em;
+        &.desktop {
+          display: none;
+        }
+      }
+      #d-toc {
+        z-index: z("header") + 1;
+        background: var(--secondary);
+        position: fixed;
+        right: 0;
+        top: 0;
+
+        height: 100vh;
+        width: 100vw;
+        max-width: 500px;
+        overflow: scroll;
+        transition: transform 0.5s, opacity 0.25s;
+        transform: translatex(100%);
+        opacity: 0;
+        :not(.rtl) & {
+          margin-left: -1px;
+        }
+        .rtl & {
+          margin-right: -1px;
+        }
+        &.d-toc-mobile {
+          transform: translatex(0);
+          opacity: 1;
+        }
+        .d-toc-active {
+          &:before {
+            :not(.rtl) & {
+              margin-left: -1px;
+            }
+            .rtl & {
+              margin-right: -1px;
+            }
+          }
+        }
+      }
+      .d-toc-close-wrapper {
+        height: 3em;
+        background: var(--secondary);
+        color: var(--primary-med-or-secondary-med);
+        margin-bottom: 1em;
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        .d-toc-close {
+          padding: 1em 0.75em;
+        }
+      }
+      .d-toc-toggle {
+        position: fixed;
+        bottom: 5px;
+
+        padding: 0.5em 1em;
+        background: var(--tertiary);
+        color: var(--secondary);
+        z-index: 3;
+        margin-bottom: env(safe-area-inset-bottom);
+        :not(.rtl) & {
+          right: 16px;
+        }
+        .rtl & {
+          left: 16px;
+        }
+        body.footer-nav-visible & {
+          bottom: 49px;
+        }
+      }
+      #d-toc > ul {
+        :not(.rtl) & {
+          margin-left: 20px;
+          border-left: 1px solid var(--primary-low);
+        }
+        .rtl & {
+          margin-right: 20px;
+          border-right: 1px solid var(--primary-low);
+        }
+        &:last-child {
+          margin-bottom: 5em;
+        }
+      }
+    }
   }
 }