From 76bba715743e2069f68a1f449c0ca174bffe3227 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Thu, 2 Sep 2021 23:38:57 +0800
Subject: [PATCH] Calculate `--sidebar-wrapper-height` in pure CSS (#360)

---
 layout/_macro/sidebar.njk                     |  6 ++----
 source/css/_common/outline/sidebar/index.styl |  8 ++++----
 .../_common/outline/sidebar/sidebar-nav.styl  |  3 ++-
 source/js/next-boot.js                        |  2 --
 source/js/utils.js                            | 19 +------------------
 5 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/layout/_macro/sidebar.njk b/layout/_macro/sidebar.njk
index f19a830..bae7322 100644
--- a/layout/_macro/sidebar.njk
+++ b/layout/_macro/sidebar.njk
@@ -32,11 +32,9 @@
         <!--/noindex-->
 
         <div class="site-overview-wrap sidebar-panel">
-          <div class="site-overview">
-            {{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}
+          {{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}
 
-            {{- next_inject('sidebar') }}
-          </div>
+          {{- next_inject('sidebar') }}
         </div>
       </div>
 
diff --git a/source/css/_common/outline/sidebar/index.styl b/source/css/_common/outline/sidebar/index.styl
index a6195f4..bec4c6d 100644
--- a/source/css/_common/outline/sidebar/index.styl
+++ b/source/css/_common/outline/sidebar/index.styl
@@ -1,11 +1,11 @@
 .sidebar-inner {
   color: $grey-dark;
+  // Init Sidebar & TOC inner dimensions on all pages and for all schemes.
+  $offset = (($scheme == 'Pisces') or ($scheme == 'Gemini')) ? $sidebar-offset : $sidebar-padding;
+  max-height: 'calc(100vh - %s)' % unit($offset * 2, 'px');
   padding: $sidebar-padding 10px;
   text-align: center;
-}
-
-.site-overview {
-  max-height: var(--sidebar-wrapper-height);
+  flex-column();
 }
 
 .site-overview-item:not(:first-child) {
diff --git a/source/css/_common/outline/sidebar/sidebar-nav.styl b/source/css/_common/outline/sidebar/sidebar-nav.styl
index aa2c820..268a59d 100644
--- a/source/css/_common/outline/sidebar/sidebar-nav.styl
+++ b/source/css/_common/outline/sidebar/sidebar-nav.styl
@@ -35,8 +35,9 @@
   }
 }
 
+// Need for Sidebar/TOC inner scrolling if content taller then viewport.
 .sidebar-panel-container {
-  max-height: var(--sidebar-wrapper-height);
+  flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
 }
diff --git a/source/js/next-boot.js b/source/js/next-boot.js
index 3d58faf..9888830 100644
--- a/source/js/next-boot.js
+++ b/source/js/next-boot.js
@@ -45,8 +45,6 @@ NexT.boot.registerEvents = function() {
     });
   });
 
-  window.addEventListener('resize', NexT.utils.initSidebarDimension);
-
   window.addEventListener('hashchange', () => {
     const tHash = location.hash;
     if (tHash !== '' && !tHash.match(/%\S{2}/)) {
diff --git a/source/js/utils.js b/source/js/utils.js
index 05e493d..c3c1ec7 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -273,6 +273,7 @@ NexT.utils = {
     }
     // Scrolling to center active TOC element if TOC content is taller then viewport.
     const tocElement = document.querySelector('.sidebar-panel-container');
+    if (!tocElement.parentNode.classList.contains('sidebar-toc-active')) return;
     window.anime({
       targets  : tocElement,
       duration : 200,
@@ -281,25 +282,7 @@ NexT.utils = {
     });
   },
 
-  /**
-   * Init Sidebar & TOC inner dimensions on all pages and for all schemes.
-   * Need for Sidebar/TOC inner scrolling if content taller then viewport.
-   */
-  initSidebarDimension: function() {
-    const sidebarNav = document.querySelector('.sidebar-nav');
-    const sidebarb2t = document.querySelector('.sidebar-inner .back-to-top');
-    const sidebarNavHeight = sidebarNav ? sidebarNav.offsetHeight : 0;
-    const sidebarb2tHeight = sidebarb2t ? sidebarb2t.offsetHeight : 0;
-    const sidebarOffset = CONFIG.sidebar.offset || 12;
-    let sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
-    if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += sidebarOffset * 2;
-    // Initialize Sidebar & TOC Height.
-    const sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
-    document.documentElement.style.setProperty('--sidebar-wrapper-height', sidebarWrapperHeight);
-  },
-
   updateSidebarPosition: function() {
-    NexT.utils.initSidebarDimension();
     if (window.innerWidth < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
     // Expand sidebar on post detail page by default, when post has a toc.
     const hasTOC = document.querySelector('.post-toc');