From d49f0d19483e5a9f7835334a11fe173f107db811 Mon Sep 17 00:00:00 2001
From: EGOIST <0x142857@gmail.com>
Date: Sun, 16 Dec 2018 15:35:34 +0800
Subject: [PATCH] feat(ui): tweak sidebar toc

---
 src/components/Sidebar.vue             | 34 ++++++++------------------
 src/css/vars.css                       |  1 +
 src/views/Home.vue                     |  2 +-
 website/docs/guide/customization.md    |  3 +++
 website/docs/zh/guide/customization.md |  3 +++
 5 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index b2df929c..1be1913a 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -82,7 +82,7 @@ export default {
 @import 'vars.css';
 
 .Sidebar {
-  width: 250px;
+  width: var(--sidebar-width);
   background: var(--sidebar-bg);
   position: fixed;
   top: var(--header-height);
@@ -142,8 +142,7 @@ export default {
   font-size: 1.1rem;
   position: relative;
 
-  &.active,
-  &:hover {
+  &.active {
     font-weight: bold;
   }
 }
@@ -151,37 +150,24 @@ export default {
 .TocHeading {
   display: flex;
   line-height: 1.4;
-  margin-bottom: 3px;
+  margin: 5px 0;
   position: relative;
 
-  &:first-child {
-    margin-top: 5px;
-  }
-
-  &:last-child {
-    margin-bottom: 5px;
-  }
-
   &[data-level='2'] {
-    margin-left: 35px;
+    padding: 0 20px;
+    &:before {
+      content: '-';
+      margin-right: 5px;
+      color: #979797;
+    }
   }
 
   &[data-level='3'] {
-    margin-left: 50px;
+    padding: 0 20px 0 50px;
   }
 
   &.router-link-exact-active {
     font-weight: bold;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 3px;
-      right: 0;
-      background: #333;
-    }
   }
 }
 </style>
diff --git a/src/css/vars.css b/src/css/vars.css
index 5afd1c74..b7bdfe09 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -1,5 +1,6 @@
 :root {
   --accent-color: rgb(6, 125, 247);
+  --sidebar-width: 280px;
   --sidebar-bg: white;
   --sidebar-section-title-color: rgb(136, 136, 136);
   --border-color: #eaeaea;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 296a3a6c..3d39cfab 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -144,7 +144,7 @@ export default {
 }
 
 .Main {
-  margin-left: 250px;
+  margin-left: var(--sidebar-width);
   padding: 30px 20px 80px 80px;
   margin-top: var(--header-height);
 
diff --git a/website/docs/guide/customization.md b/website/docs/guide/customization.md
index 3d4f7600..6e5bf968 100644
--- a/website/docs/guide/customization.md
+++ b/website/docs/guide/customization.md
@@ -5,10 +5,13 @@
 Default [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables):
 
 ```css
+:root {
   --accent-color: rgb(6, 125, 247);
+  --sidebar-width: 280px;
   --sidebar-bg: white;
   --sidebar-section-title-color: rgb(136, 136, 136);
   --border-color: #eaeaea;
   --header-height: 60px;
   --code-font: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
+}
 ```
diff --git a/website/docs/zh/guide/customization.md b/website/docs/zh/guide/customization.md
index 8c12ac4e..693b8555 100644
--- a/website/docs/zh/guide/customization.md
+++ b/website/docs/zh/guide/customization.md
@@ -5,10 +5,13 @@
 默认 [CSS 变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)：
 
 ```css
+:root {
   --accent-color: rgb(6, 125, 247);
+  --sidebar-width: 280px;
   --sidebar-bg: white;
   --sidebar-section-title-color: rgb(136, 136, 136);
   --border-color: #eaeaea;
   --header-height: 60px;
   --code-font: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
+}
 ```