From 88cea47545900bc16c3065ecfcb860345698a417 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Tue, 11 Oct 2022 23:05:45 +0800
Subject: [PATCH] perf(toc): optimize toggle show style of TOC

---
 source/css/common/variables.styl       | 2 +-
 source/css/layout/_partial/header.styl | 1 +
 source/css/layout/article-content.styl | 1 +
 source/css/layout/page.styl            | 1 +
 source/js/toggle-show-toc.js           | 2 ++
 source/js/utils.js                     | 2 +-
 6 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index b683f5b..fea67d9 100644
--- a/source/css/common/variables.styl
+++ b/source/css/common/variables.styl
@@ -16,7 +16,7 @@ $post-tool-button-width = 38px                                  // post tool but
 $component-spacing-value = 38px                                 // component-spacing-value (PC)
 
 // main content max width
-$content-max-width = 950px
+$content-max-width = 928px
 
 // main content max width of has TOC
 $has-toc-content-max-width = $content-max-width * 1.2
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index b5657e7..5ccd25b 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -25,6 +25,7 @@ $logo-image-box-width = 46px
     width $main-content-width
     max-width $content-max-width
     height 100%
+    transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
 
 
     &.has-first-screen {
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index d68a7dc..d9e7dfe 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -267,6 +267,7 @@ $toc-container-width = 16rem
     width $toc-container-width
     max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
     padding-left 2rem
+    padding-bottom 1rem
     transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
 
     .header-shrink & {
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 1c003e7..4e0e8e3 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -109,6 +109,7 @@
         width $main-content-width
         max-width $content-max-width
         height 100%
+        transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
 
         .has-toc & {
           max-width $has-toc-content-max-width
diff --git a/source/js/toggle-show-toc.js b/source/js/toggle-show-toc.js
index 592a5f2..e0e91ed 100644
--- a/source/js/toggle-show-toc.js
+++ b/source/js/toggle-show-toc.js
@@ -20,8 +20,10 @@ function initToggleShowToc() {
     handleToggle(isOpen) {
       if (isOpen) {
         this.postPageContainerDom.classList.add('show-toc')
+        document.body.classList.add('has-toc')
       } else {
         this.postPageContainerDom.classList.remove('show-toc')
+        document.body.classList.remove('has-toc')
       }
     },
 
diff --git a/source/js/utils.js b/source/js/utils.js
index f985880..e9baec2 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -139,7 +139,7 @@ KEEP.initUtils = () => {
       const mainContentDom = document.querySelector('.main-content')
       const iconDom = toolExpandDom.querySelector('i')
 
-      const defaultMaxWidth = '950px'
+      const defaultMaxWidth = '928px'
       const expandMaxWidth = '90%'
       let headerMaxWidth = defaultMaxWidth