From cec2af240cdc911edc1a2adbdaff9b79a2a6960c Mon Sep 17 00:00:00 2001
From: saltysugar <49533754+saltysugar@users.noreply.github.com>
Date: Wed, 31 Jul 2019 20:23:34 +0800
Subject: [PATCH] feat: update sidebar ui (#257)

* update sidebar ui

* fix dark theme

* Update docs

* Update style

* Refactor

* Remove unused style

* Update style
---
 src/components/PageToc.vue             |  59 ++++++++
 src/components/Sidebar.vue             |  24 +++-
 src/components/SidebarItem.vue         | 183 ++++++++++++++-----------
 src/css/main.css                       |   2 +
 src/utils/cssVariables.js              |   6 +-
 src/utils/markedRenderer.js            |   2 +-
 website/docs/guide/customization.md    |   8 +-
 website/docs/options.md                |  23 +++-
 website/docs/zh/guide/customization.md |  11 +-
 website/docs/zh/options.md             |  24 +++-
 website/index.js                       |  22 +--
 11 files changed, 236 insertions(+), 128 deletions(-)
 create mode 100644 src/components/PageToc.vue

diff --git a/src/components/PageToc.vue b/src/components/PageToc.vue
new file mode 100644
index 00000000..b57229ac
--- /dev/null
+++ b/src/components/PageToc.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="PageToc"
+    v-if="
+      !$store.state.fetchingFile &&
+        link.toc !== false &&
+        link.link === $route.path &&
+        $store.state.page.headings &&
+        $store.state.page.headings.length > 0
+    "
+  >
+    <router-link
+      class="PageTocHeading"
+      :to="{hash: heading.slug}"
+      :data-level="heading.level"
+      v-for="heading in $store.state.page.headings"
+      :key="heading.slug"
+      v-html="heading.text"
+    ></router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    link: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.PageToc {
+  border-left: 1px solid var(--border-color);
+  margin-left: 16px;
+  margin-top: 10px;
+}
+
+.PageTocHeading {
+  display: flex;
+  line-height: 1;
+  position: relative;
+
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  &[data-level='2'] {
+    margin-left: 16px;
+  }
+
+  &.router-link-exact-active {
+    font-weight: bold;
+    color: var(--sidebar-link-active-color);
+  }
+}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 4affe906..3c620067 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -14,8 +14,8 @@
         v-for="(item, index) in $store.getters.sidebar"
         :key="index"
         :item="item"
-        :open="currentOpenIndex === index"
-        @toggle="openSidebar(index)"
+        :open="openItems.indexOf(index) !== -1"
+        @toggle="toggleItem(index)"
       />
     </div>
 
@@ -35,23 +35,33 @@ export default {
   },
   data() {
     return {
-      currentOpenIndex: 0
+      openItems: []
     }
   },
   watch: {
     '$route.path': {
       handler() {
-        this.currentOpenIndex = this.getCurrentIndex(
+        const index = this.getCurrentIndex(
           this.$route.path,
           this.$store.getters.sidebar
         )
+        this.openItem(index)
       },
       immediate: true
     }
   },
   methods: {
-    openSidebar(index) {
-      this.currentOpenIndex = this.currentOpenIndex === index ? -1 : index
+    openItem(index) {
+      if (this.openItems.indexOf(index) === -1) {
+        this.openItems.push(index)
+      }
+    },
+    toggleItem(index) {
+      if (this.openItems.indexOf(index) === -1) {
+        this.openItems.push(index)
+      } else {
+        this.openItems = this.openItems.filter(v => v !== index)
+      }
     },
     getCurrentIndex(currentPath, sidebarItems) {
       for (let idx = 0; idx < sidebarItems.length; idx++) {
@@ -63,7 +73,7 @@ export default {
           return idx
         }
       }
-      return -1
+      return 0
     },
     getChildren(item) {
       return item.children || item.links || []
diff --git a/src/components/SidebarItem.vue b/src/components/SidebarItem.vue
index df7a3aec..8a2f4055 100644
--- a/src/components/SidebarItem.vue
+++ b/src/components/SidebarItem.vue
@@ -2,60 +2,66 @@
   <div :class="['SidebarItem', item.title && 'hasTitle']">
     <div
       class="ItemTitle"
-      v-if="item.title"
-      :collapsable="item.collapsable"
-      :class="{collapsable: item.collapsable}"
+      :class="{collapsable: item.collapsable !== false}"
+      v-if="item.title && children"
       @click="$emit('toggle')"
     >
-      {{ item.title }}
-      <span
-        v-if="item.collapsable"
-        class="arrow"
-        :class="open ? 'down' : 'right'"
-      ></span>
+      <span v-if="item.collapsable !== false" class="arrow" :class="{open}">
+        <svg
+          width="6"
+          height="10"
+          viewBox="0 0 6 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.4 8.56L4.67 5M1.4 1.23L4.66 4.7"
+            stroke="currentColor"
+            stroke-linecap="square"
+          />
+        </svg>
+      </span>
+      <span>{{ item.title }}</span>
+    </div>
+    <uni-link
+      class="ItemLink"
+      :class="{active: $route.path === item.link}"
+      v-if="item.title && item.link"
+      :to="item.link"
+      >{{ item.title }}</uni-link
+    >
+    <div class="ItemLinkToc" v-if="item.title && item.link">
+      <PageToc :link="item" />
     </div>
-    <template v-if="!item.collapsable || open">
-      <template v-for="(link, index) of children">
+
+    <div
+      class="ItemChildren"
+      v-if="children && (open || item.collapsable === false)"
+    >
+      <div class="ItemChild" v-for="(link, index) of children" :key="index">
         <uni-link
-          class="ItemLink"
-          :key="index"
+          class="ItemChildLink"
+          :class="{active: $route.path === link.link}"
           :to="link.link"
           :openInNewTab="link.openInNewTab"
           :prefetchFiles="getPrefetchFiles(link.link)"
           >{{ link.title }}</uni-link
         >
-        <div
-          class="LinkToc"
-          v-if="
-            !$store.state.fetchingFile &&
-              link.toc !== false &&
-              link.link === $route.path &&
-              $store.state.page.headings &&
-              $store.state.page.headings.length > 0
-          "
-          :key="`toc-${index}`"
-        >
-          <router-link
-            class="TocHeading"
-            :to="{hash: heading.slug}"
-            :data-level="heading.level"
-            v-for="heading in $store.state.page.headings"
-            :key="heading.slug"
-            v-html="heading.text"
-          ></router-link>
-        </div>
-      </template>
-    </template>
+        <PageToc :link="link" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import {isExternalLink, getFileUrl, getFilenameByPath} from '../utils'
 import UniLink from './UniLink.vue'
+import PageToc from './PageToc.vue'
 
 export default {
   components: {
-    UniLink
+    UniLink,
+    PageToc
   },
   props: {
     item: {
@@ -75,7 +81,7 @@ export default {
   },
   computed: {
     children() {
-      return this.item.children || this.item.links || []
+      return this.item.children || this.item.links
     }
   },
   methods: {
@@ -105,66 +111,81 @@ export default {
 <style scoped>
 .SidebarItem {
   &:not(:last-child) {
-    margin-bottom: 1.2rem;
+    margin-bottom: 10px;
   }
 
-  &.hasTitle {
-    & .ItemLink {
-      font-size: 0.9rem;
-    }
-  }
+  font-size: 0.875rem;
 
-  &.hasTitle >>> .TocHeading {
-    font-size: 0.9rem;
+  & a {
+    color: var(--sidebar-link-color);
+
+    &:hover {
+      color: var(--sidebar-link-active-color);
+    }
   }
 }
 
 .ItemTitle {
-  font-size: 1rem;
   padding: 0 20px;
   margin-bottom: 10px;
   position: relative;
-  color: var(--sidebar-section-title-color);
-  text-transform: uppercase;
+  color: var(--sidebar-link-color);
+  user-select: none;
+  font-size: 0;
 
-  &.collapsable {
-    &:hover {
-      cursor: pointer;
-    }
+  &.collapsable:hover {
+    cursor: pointer;
+    color: var(--sidebar-link-active-color);
+  }
+
+  & span {
+    font-size: 0.9rem;
   }
 }
 
 .ItemLink {
-  padding: 2px 20px;
+  margin: 0 20px;
   display: flex;
-  font-size: 1.1rem;
-  position: relative;
+  align-items: center;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: var(--sidebar-link-arrow-color);
+    margin-right: 8px;
+  }
 
   &.active {
+    color: var(--sidebar-link-active-color);
     font-weight: bold;
   }
 }
 
-.TocHeading {
-  display: flex;
-  line-height: 1.4;
-  margin: 5px 0;
-  position: relative;
+.ItemLinkToc {
+  margin: 0 8px;
+}
 
-  &[data-level='2'] {
-    padding: 0 20px;
-    &:before {
-      content: '-';
-      margin-right: 5px;
-      color: #979797;
-    }
-  }
+.ItemChildren {
+  border-left: 1px solid var(--border-color);
+  margin: 0 20px;
+}
 
-  &[data-level='3'] {
-    padding: 0 20px 0 40px;
+.ItemChild {
+  &:not(:last-child) {
+    margin-bottom: 10px;
   }
+}
+
+.ItemChildLink {
+  padding-left: 16px;
+  display: flex;
+  position: relative;
+  line-height: 1;
 
-  &.router-link-exact-active {
+  &.active {
     font-weight: bold;
   }
 }
@@ -175,20 +196,18 @@ a {
 }
 
 .arrow {
+  width: 16px;
   display: inline-block;
-  position: relative;
-  top: -0.1em;
-  left: 0.5em;
-  &.right {
-    border-left: 6px solid #ccc;
-    border-top: 4px solid transparent;
-    border-bottom: 4px solid transparent;
+  color: var(--sidebar-link-arrow-color);
+
+  & svg {
+    transition: all 0.15s ease;
   }
 
-  &.down {
-    border-top: 6px solid #ccc;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
+  &.open {
+    & svg {
+      transform: rotate(90deg);
+    }
   }
 }
 </style>
diff --git a/src/css/main.css b/src/css/main.css
index b99c5a32..152ae02d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -2,6 +2,8 @@ body {
   margin: 0;
   color: var(--text-color);
   background: var(--page-background);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
   font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 }
 
diff --git a/src/utils/cssVariables.js b/src/utils/cssVariables.js
index 6c67d85f..09ed4c27 100644
--- a/src/utils/cssVariables.js
+++ b/src/utils/cssVariables.js
@@ -6,7 +6,9 @@ const defaultCssVariables = {
   accentColor: '#3eaf7c',
   sidebarWidth: '280px',
   sidebarBackground: 'white',
-  sidebarSectionTitleColor: 'rgb(136, 136, 136)',
+  sidebarLinkColor: '#444',
+  sidebarLinkActiveColor: '#000',
+  sidebarLinkArrowColor: '#999',
   borderColor: '#eaeaea',
   headerHeight: '55px',
   codeFont: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
@@ -39,6 +41,8 @@ const darkCssVariables = {
   pageBackground: '#2f3136',
   headerBackground: '#2f3136',
   sidebarBackground: '#2f3136',
+  sidebarLinkColor: 'var(--text-color)',
+  sidebarLinkActiveColor: 'var(--text-color)',
   textColor: 'hsla(0,0%,100%,0.88)',
   accentColor: '#0096cf',
   linkColor: 'currentColor',
diff --git a/src/utils/markedRenderer.js b/src/utils/markedRenderer.js
index 9807bc79..67d064c9 100644
--- a/src/utils/markedRenderer.js
+++ b/src/utils/markedRenderer.js
@@ -21,7 +21,7 @@ export default hooks => {
       return ''
     }
 
-    if (level === 2 || level === 3) {
+    if (level === 2) {
       env.headings.push({
         level,
         raw,
diff --git a/website/docs/guide/customization.md b/website/docs/guide/customization.md
index 767e0312..62d203da 100644
--- a/website/docs/guide/customization.md
+++ b/website/docs/guide/customization.md
@@ -49,8 +49,7 @@ new Docute({
   sidebar: [
     // A sidebar item, with child links
     {
-      title: 'Guide', // Optional
-      collapsable: true, // Optional
+      title: 'Guide',
       children: [
         {
           title: 'Getting Started',
@@ -61,6 +60,11 @@ new Docute({
           link: '/guide/installation'
         }
       ]
+    },
+    // An external link
+    {
+      title: 'GitHub',
+      link: 'https://github.com/egoist/docute'
     }
   ]
 })
diff --git a/website/docs/options.md b/website/docs/options.md
index 87a1588c..5a8afb5f 100644
--- a/website/docs/options.md
+++ b/website/docs/options.md
@@ -62,21 +62,30 @@ interface NavItemLink {
 An array of navigation items to display at sidebar.
 
 ```ts
-interface SidebarItem {
-  title?: string
-  collapsable?: boolean
-  children: Array<SidebarItemLink>
-}
+type SidebarItem = SingleItem | MultiItem
 
-interface SidebarItemLink {
+interface SingleItem {
   title: string
   link: string
   // Whether to open the link in a new tab
   // Only works for external links
   // Defaults to `true`
   openInNewTab?: boolean
-  /* Whether to show TOC, true by default */
+}
+
+interface MultiItem {
+  title: string
+  children: Array<SingleItem>
+  /**
+   * Whether to show TOC
+   * Default to `true`
+   */
   toc?: boolean
+  /**
+   * Whether to make children collapsable
+   * Default to `true` 
+   */
+  collapsable?: boolean
 }
 ```
 
diff --git a/website/docs/zh/guide/customization.md b/website/docs/zh/guide/customization.md
index 62891dae..0165e103 100644
--- a/website/docs/zh/guide/customization.md
+++ b/website/docs/zh/guide/customization.md
@@ -45,9 +45,9 @@ new Docute({
 ```js
 new Docute({
   sidebar: [
+    // A sidebar item, with child links
     {
-      title: 'Guide', // 可选的
-      collapsable: true, // 可选的
+      title: 'Guide',
       children: [
         {
           title: 'Getting Started',
@@ -56,8 +56,13 @@ new Docute({
         {
           title: 'Installation',
           link: '/guide/installation'
-        },
+        }
       ]
+    },
+    // An external link
+    {
+      title: 'GitHub',
+      link: 'https://github.com/egoist/docute'
     }
   ]
 })
diff --git a/website/docs/zh/options.md b/website/docs/zh/options.md
index 35bcd091..67d0d8ec 100644
--- a/website/docs/zh/options.md
+++ b/website/docs/zh/options.md
@@ -63,20 +63,30 @@ interface NavItemLink {
 在侧边栏中显示的导航栏。
 
 ```ts
-interface SidebarItem {
-  title?: string
-  children: Array<ItemLink>
-}
+type SidebarItem = SingleItem | MultiItem
 
-interface ItemLink {
+interface SingleItem {
   title: string
   link: string
   // Whether to open the link in a new tab
   // Only works for external links
   // Defaults to `true`
   openInNewTab?: boolean
-  /* 是否显示 TOC，默认为 true */
-  toc: boolean
+}
+
+interface MultiItem {
+  title: string
+  children: Array<SingleItem>
+  /**
+   * Whether to show TOC
+   * Default to `true`
+   */
+  toc?: boolean
+  /**
+   * Whether to make children collapsable
+   * Default to `true` 
+   */
+  collapsable?: boolean
 }
 ```
 
diff --git a/website/index.js b/website/index.js
index 952df8cd..afa7f4ad 100644
--- a/website/index.js
+++ b/website/index.js
@@ -107,7 +107,6 @@ new Docute({
   sidebar: [
     {
       title: 'Guide',
-      collapsable: true,
       children: [
         {
           title: 'Introduction',
@@ -141,7 +140,6 @@ new Docute({
     },
     {
       title: 'Advanced',
-      collapsable: true,
       children: [
         {
           title: 'Use With Bundlers',
@@ -155,7 +153,6 @@ new Docute({
     },
     {
       title: 'References',
-      collapsable: true,
       children: [
         {
           title: 'Options',
@@ -172,14 +169,8 @@ new Docute({
       ]
     },
     {
-      title: 'Misc',
-      collapsable: true,
-      children: [
-        {
-          title: 'Credits',
-          link: '/credits'
-        }
-      ]
+      title: 'Credits',
+      link: '/credits'
     }
   ],
   overrides: {
@@ -264,13 +255,8 @@ new Docute({
           ]
         },
         {
-          title: '其它',
-          children: [
-            {
-              title: '致谢',
-              link: '/zh/credits'
-            }
-          ]
+          title: '致谢',
+          link: '/zh/credits'
         }
       ]
     }