From e4830ebb1f683482a1199b9ee1201eecd4ca12fe Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Wed, 2 Sep 2020 19:17:24 +0800
Subject: [PATCH] style: optimize the sidebar style

---
 _config.yml                                   |  1 -
 .../layout/_partial/sidebar-categories.styl   | 92 ++++++++-----------
 source/css/layout/_partial/sidebar.styl       |  9 +-
 source/css/layout/page.styl                   |  2 +-
 source/js/toc.js                              | 12 ++-
 5 files changed, 50 insertions(+), 66 deletions(-)

diff --git a/_config.yml b/_config.yml
index dcdf446..f45ceb0 100644
--- a/_config.yml
+++ b/_config.yml
@@ -104,5 +104,4 @@ magic:
   shadow: true
   sidebar:
     enable: false
-    fixed: true
     position: right  # values: left | right
diff --git a/source/css/layout/_partial/sidebar-categories.styl b/source/css/layout/_partial/sidebar-categories.styl
index f2d083e..aec4196 100644
--- a/source/css/layout/_partial/sidebar-categories.styl
+++ b/source/css/layout/_partial/sidebar-categories.styl
@@ -10,77 +10,61 @@
   .category-label {
     margin-bottom: 12px;
     padding-bottom: 12px;
-    //padding-left: 10px;
     font-size: 16px;
     font-weight: 600;
     border-bottom: 1px solid var(--border-color);
-
-    /*&::after {
-      content: '';
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      width: 4px;
-      height: 20px;
-      background: #333;
-
-    }
-*/
-  }
-
-
-  .category-list {
-
-    li.category-list-item {
-      padding: 6px;
-      margin-bottom: 10px;
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      transition: all 0.3s ease;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &:hover {
-        box-shadow: 0 0 5px var(--border-color);
-        transform: scale(1.02);
-      }
-
-      .number {
-        font-size: 12px;
-        background: skyblue;
-        border-radius: 2px;
-        width: 22px;
-        height: 22px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--background-color);
-
-      }
-    }
   }
 
   .post-category-list {
+
     .post-category-list-item {
-      display: flex;
-      justify-content: space-between;
       margin-bottom: 10px;
 
       &:last-child {
         margin-bottom: 0;
       }
 
-      .post-category-list-link {
+      a.post-category-list-link {
+
+        &:hover {
+          font-weight: 550;
+        }
 
       }
 
-      .post-category-list-count {
+      span.post-category-list-count {
 
+        float: right;
+
+        &::before {
+          content: '（';
+        }
+
+        &::after {
+          content: '）';
+        }
+
+      }
+
+
+      ul.post-category-list-child {
+
+        margin-left: 10px;
+        margin-top: 15px;
+
+        li {
+
+          &::before {
+            content: '· ';
+          }
+
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+        }
       }
     }
   }
diff --git a/source/css/layout/_partial/sidebar.styl b/source/css/layout/_partial/sidebar.styl
index 829ed51..ccd6912 100644
--- a/source/css/layout/_partial/sidebar.styl
+++ b/source/css/layout/_partial/sidebar.styl
@@ -25,10 +25,5 @@
 }
 
 .sidebar-other {
-  if (!hexo-config('magic.sidebar.fixed')) {
-    position: absolute;
-  } else {
-    position: fixed;
-  }
-
-}
\ No newline at end of file
+  position: absolute;
+}
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 8e7b6cc..a381d79 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -187,4 +187,4 @@
   .main-content {
     width: 90% !important;
   }
-}
\ No newline at end of file
+}
diff --git a/source/js/toc.js b/source/js/toc.js
index 83a2972..ead7d29 100644
--- a/source/js/toc.js
+++ b/source/js/toc.js
@@ -24,7 +24,6 @@ window.addEventListener('DOMContentLoaded', () => {
         });
 
 
-
         function activateNavByIndex(target) {
             if (target.classList.contains('active-current')) return;
             document.querySelectorAll('.post-toc .active').forEach(element => {
@@ -86,8 +85,15 @@ window.addEventListener('DOMContentLoaded', () => {
         createIntersectionObserver(document.documentElement.scrollHeight);
 
     } else {
-        postTocWrap.innerHTML = '';
-        articleToc.style.display = 'none';
+
+        if (postTocWrap) {
+            postTocWrap.innerHTML = '';
+            postTocWrap.style.display = 'none';
+        }
+
+        if (articleToc) {
+            articleToc.style.display = 'none';
+        }
     }