From 5265b039741555943f9a6f0451287aefb6810f28 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 28 Nov 2024 02:58:25 +0800
Subject: [PATCH] feat: support vertical scrolling for toc in desktop mode
 (#2064)

---
 _includes/toc.html                 |  5 +--
 _layouts/default.html              |  2 +-
 _sass/abstracts/_placeholders.scss |  4 +++
 _sass/layout/_panel.scss           | 12 +++++---
 _sass/pages/_post.scss             | 49 +++++++++++++++++++++++++++---
 5 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/_includes/toc.html b/_includes/toc.html
index 49c8f9052d3..883bf135d55 100644
--- a/_includes/toc.html
+++ b/_includes/toc.html
@@ -1,8 +1,9 @@
 {% include toc-status.html %}
 
 {% if enable_toc %}
-  <section id="toc-wrapper" class="ps-0 pe-4">
-    <h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+  <div class="toc-border-cover z-3"></div>
+  <section id="toc-wrapper" class="position-sticky ps-0 pe-4">
+    <h2 class="panel-heading ps-3 pb-2 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>
 {% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
index c83c561c242..a55bfefe9ab 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -33,7 +33,7 @@
           </main>
 
           <!-- panel -->
-          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
             <div class="access">
               {% include_cached update-list.html lang=lang %}
               {% include_cached trending-tags.html lang=lang %}
diff --git a/_sass/abstracts/_placeholders.scss b/_sass/abstracts/_placeholders.scss
index e4c1bb06d3a..9a2b8ac80af 100644
--- a/_sass/abstracts/_placeholders.scss
+++ b/_sass/abstracts/_placeholders.scss
@@ -154,3 +154,7 @@
 %max-w-100 {
   max-width: 100%;
 }
+
+%panel-border {
+  border-left: 1px solid var(--main-border-color);
+}
diff --git a/_sass/layout/_panel.scss b/_sass/layout/_panel.scss
index bb5c2bc180c..c0d5e9ebc57 100644
--- a/_sass/layout/_panel.scss
+++ b/_sass/layout/_panel.scss
@@ -6,7 +6,6 @@
   top: 2rem;
   transition: top 0.2s ease-in-out;
   margin-top: 3rem;
-  margin-bottom: 4rem;
 
   &:only-child {
     position: -webkit-sticky;
@@ -14,11 +13,12 @@
   }
 
   > section {
+    @extend %panel-border;
+
     padding-left: 1rem;
-    border-left: 1px solid var(--main-border-color);
 
-    &:not(:last-child) {
-      margin-bottom: 4rem;
+    &:not(:first-child) {
+      margin-top: 4rem;
     }
   }
 
@@ -48,6 +48,10 @@
     }
   }
 
+  > :last-child {
+    margin-bottom: 4rem;
+  }
+
   @include bp.lt(bp.get(xl)) {
     display: none;
   }
diff --git a/_sass/pages/_post.scss b/_sass/pages/_post.scss
index d789050d6bd..19adf3fa66e 100644
--- a/_sass/pages/_post.scss
+++ b/_sass/pages/_post.scss
@@ -246,14 +246,26 @@ header {
 }
 
 /* TOC panel */
-#toc-wrapper {
-  border-left: 1px solid rgba(158, 158, 158, 0.17);
-  position: -webkit-sticky;
+
+%top-cover {
+  content: '';
+  display: block;
   position: sticky;
-  top: 4rem;
+  top: 0;
+  width: 100%;
+  height: 3rem;
+  background: linear-gradient(var(--main-bg) 50%, transparent);
+}
+
+#toc-wrapper {
+  top: 0;
   transition: top 0.2s ease-in-out;
   -webkit-animation: fade-up 0.8s;
   animation: fade-up 0.8s;
+  overflow-y: auto;
+  max-height: calc(100vh - 2rem);
+  scrollbar-width: none;
+  margin-top: 2rem;
 
   ul {
     list-style: none;
@@ -266,6 +278,10 @@ header {
         margin: 0.4rem 0;
       }
 
+      &:first-child {
+        margin-top: 0;
+      }
+
       a {
         padding: 0.2rem 0 0.2rem 1.25rem;
       }
@@ -295,7 +311,6 @@ header {
       &::before {
         display: inline-block;
         width: 1px;
-        left: -1px;
         height: 1.25rem;
         background-color: var(--toc-highlight) !important;
       }
@@ -305,6 +320,30 @@ header {
       padding-left: 0.75rem;
     }
   }
+
+  @at-root .toc-border-cover {
+    @extend %top-cover;
+
+    margin-bottom: -4rem;
+  }
+
+  &::before {
+    @extend %top-cover;
+  }
+
+  &::after {
+    content: '';
+    position: fixed;
+    bottom: 0;
+    width: 15%;
+    height: 3.25rem;
+    margin-left: -1px;
+    background: linear-gradient(transparent, var(--main-bg) 70%);
+  }
+
+  > * {
+    @extend %panel-border;
+  }
 }
 
 /* --- TOC button, bar and popup in mobile/tablet --- */