From 7a820e976295f7e486830515e700f35204c69c3c Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 19:51:28 +0800
Subject: [PATCH 01/12] feat($theme-default): clickable heading for sidebar
 groups

---
 .../theme-default/components/SidebarGroup.vue | 63 +++++++++++++------
 .../@vuepress/theme-default/util/index.js     |  2 +
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/SidebarGroup.vue b/packages/@vuepress/theme-default/components/SidebarGroup.vue
index 4b5b756536..c2f3f06949 100644
--- a/packages/@vuepress/theme-default/components/SidebarGroup.vue
+++ b/packages/@vuepress/theme-default/components/SidebarGroup.vue
@@ -3,7 +3,26 @@
     class="sidebar-group"
     :class="{ first, collapsable }"
   >
+    <router-link
+      class="sidebar-heading clickable"
+      :class="{
+        open,
+        'active': isActive($route, item.path)
+      }"
+      :to="item.path"
+      v-if="item.path"
+      @click.native="$emit('toggle')"
+    >
+      <span>{{ item.title }}</span>
+      <span
+        class="arrow"
+        v-if="collapsable"
+        :class="open ? 'down' : 'right'">
+      </span>
+    </router-link>
+
     <p
+      v-else
       class="sidebar-heading"
       :class="{ open }"
       @click="$emit('toggle')"
@@ -16,39 +35,36 @@
       </span>
     </p>
 
-    <DropdownTransition>
-      <ul
-        ref="items"
-        class="sidebar-group-items"
-        v-if="open || !collapsable"
-      >
-        <li v-for="child in item.children">
-          <SidebarLink :item="child"/>
-        </li>
-      </ul>
-    </DropdownTransition>
+    <ul
+      ref="items"
+      class="sidebar-group-items"
+      v-if="open || !collapsable"
+    >
+      <li v-for="child in item.children">
+        <SidebarLink :item="child"/>
+      </li>
+    </ul>
   </section>
 </template>
 
 <script>
+import { isActive } from '../util'
 import SidebarLink from './SidebarLink.vue'
-import DropdownTransition from './DropdownTransition.vue'
 
 export default {
   name: 'SidebarGroup',
   props: ['item', 'first', 'open', 'collapsable'],
-  components: { SidebarLink, DropdownTransition }
+  components: { SidebarLink },
+  methods: { isActive }
 }
 </script>
 
 <style lang="stylus">
 .sidebar-group
-  &:not(.first)
-    margin-top 1em
   .sidebar-group
     padding-left 0.5em
   &:not(.collapsable)
-    .sidebar-heading
+    .sidebar-heading:not(.clickable)
       cursor auto
       color inherit
 
@@ -59,9 +75,11 @@ export default {
   font-size 1.1em
   font-weight bold
   // text-transform uppercase
-  padding 0 1.5rem
-  margin-top 0
-  margin-bottom 0.5rem
+  padding 0.35rem 1.5rem
+  width 100%
+  box-sizing border-box
+  margin 0
+  border-left 0.25rem solid transparent
   &.open, &:hover
     color inherit
   .arrow
@@ -70,6 +88,13 @@ export default {
     left 0.5em
   &:.open .arrow
     top -0.18em
+  &.clickable
+    &.active
+      font-weight 600
+      color $accentColor
+      border-left-color $accentColor
+    &:hover
+      color $accentColor
 
 .sidebar-group-items
   transition height .1s ease-out
diff --git a/packages/@vuepress/theme-default/util/index.js b/packages/@vuepress/theme-default/util/index.js
index 01937e9888..8fccc69002 100644
--- a/packages/@vuepress/theme-default/util/index.js
+++ b/packages/@vuepress/theme-default/util/index.js
@@ -148,6 +148,7 @@ function resolveHeaders (page) {
     type: 'group',
     collapsable: false,
     title: page.title,
+    path: null,
     children: headers.map(h => ({
       type: 'auto',
       title: h.title,
@@ -224,6 +225,7 @@ function resolveItem (item, pages, base, isNested) {
     const children = item.children || []
     return {
       type: 'group',
+      path: item.path,
       title: item.title,
       children: children.map(child => resolveItem(child, pages, base, true)),
       collapsable: item.collapsable !== false

From ac9776d4b8e36668110ff5f5e3ebaf9fccabfe52 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 20:02:51 +0800
Subject: [PATCH 02/12] chore: resume dropdown transition

---
 .../theme-default/components/SidebarGroup.vue | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/SidebarGroup.vue b/packages/@vuepress/theme-default/components/SidebarGroup.vue
index c2f3f06949..9c0ffc001f 100644
--- a/packages/@vuepress/theme-default/components/SidebarGroup.vue
+++ b/packages/@vuepress/theme-default/components/SidebarGroup.vue
@@ -35,26 +35,29 @@
       </span>
     </p>
 
-    <ul
-      ref="items"
-      class="sidebar-group-items"
-      v-if="open || !collapsable"
-    >
-      <li v-for="child in item.children">
-        <SidebarLink :item="child"/>
-      </li>
-    </ul>
+    <DropdownTransition>
+      <ul
+        ref="items"
+        class="sidebar-group-items"
+        v-if="open || !collapsable"
+      >
+        <li v-for="child in item.children">
+          <SidebarLink :item="child"/>
+        </li>
+      </ul>
+    </DropdownTransition>
   </section>
 </template>
 
 <script>
 import { isActive } from '../util'
 import SidebarLink from './SidebarLink.vue'
+import DropdownTransition from './DropdownTransition.vue'
 
 export default {
   name: 'SidebarGroup',
   props: ['item', 'first', 'open', 'collapsable'],
-  components: { SidebarLink },
+  components: { SidebarLink, DropdownTransition },
   methods: { isActive }
 }
 </script>

From 876b677ea8ee8d353f15eca018f8977c3fe831cf Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 20:15:37 +0800
Subject: [PATCH 03/12] fix: sidebarDepth doesn't work in i18n mode

---
 .../theme-default/components/SidebarLink.vue  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/SidebarLink.vue b/packages/@vuepress/theme-default/components/SidebarLink.vue
index 4b08380ed3..0a38894306 100644
--- a/packages/@vuepress/theme-default/components/SidebarLink.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLink.vue
@@ -6,7 +6,19 @@ export default {
 
   props: ['item'],
 
-  render (h, { parent: { $page, $site, $route }, props: { item }}) {
+  render (h,
+    {
+      parent: {
+        $page,
+        $site,
+        $route,
+        $themeConfig,
+        $themeLocaleConfig
+      },
+      props: {
+        item
+      }
+    }) {
     // use custom active class matching logic
     // due to edge case of paths ending with / + hash
     const selfActive = isActive($route, item.path)
@@ -18,9 +30,10 @@ export default {
     const link = renderLink(h, item.path, item.title || item.path, active)
     const configDepth = $page.frontmatter.sidebarDepth != null
       ? $page.frontmatter.sidebarDepth
-      : $site.themeConfig.sidebarDepth
+      : ($themeLocaleConfig.sidebarDepth || $themeConfig.sidebarDepth)
     const maxDepth = configDepth == null ? 1 : configDepth
-    const displayAllHeaders = !!$site.themeConfig.displayAllHeaders
+
+    const displayAllHeaders = !!$themeLocaleConfig.displayAllHeaders
     if (item.type === 'auto') {
       return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
     } else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {

From b0deea0f284c81421564dd9ee6eace9d60ccc674 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 21:54:07 +0800
Subject: [PATCH 04/12] feat: sidebarDepth for sidebar groups

---
 .../theme-default/components/Page.vue         | 19 +++--
 .../theme-default/components/Sidebar.vue      | 68 ++--------------
 .../theme-default/components/SidebarGroup.vue | 24 +++---
 .../theme-default/components/SidebarLink.vue  | 18 +++--
 .../theme-default/components/SidebarLinks.vue | 79 +++++++++++++++++++
 .../@vuepress/theme-default/util/index.js     | 10 +--
 6 files changed, 126 insertions(+), 92 deletions(-)
 create mode 100644 packages/@vuepress/theme-default/components/SidebarLinks.vue

diff --git a/packages/@vuepress/theme-default/components/Page.vue b/packages/@vuepress/theme-default/components/Page.vue
index d086c0b8ba..c0d622a3ac 100644
--- a/packages/@vuepress/theme-default/components/Page.vue
+++ b/packages/@vuepress/theme-default/components/Page.vue
@@ -177,13 +177,7 @@ function resolveNext (page, items) {
 
 function find (page, items, offset) {
   const res = []
-  items.forEach(item => {
-    if (item.type === 'group') {
-      res.push(...item.children || [])
-    } else {
-      res.push(item)
-    }
-  })
+  flatternItems(items, res)
   for (let i = 0; i < res.length; i++) {
     const cur = res[i]
     if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
@@ -191,6 +185,17 @@ function find (page, items, offset) {
     }
   }
 }
+
+function flatternItems (items, res) {
+  for (let i = 0, l = items.length; i < l; i++) {
+    if (items[i].type === 'group') {
+      flatternItems(items[i].children, res)
+    } else {
+      res.push(items[i])
+    }
+  }
+}
+
 </script>
 
 <style lang="stylus">
diff --git a/packages/@vuepress/theme-default/components/Sidebar.vue b/packages/@vuepress/theme-default/components/Sidebar.vue
index 472c667b04..32a9fcf993 100644
--- a/packages/@vuepress/theme-default/components/Sidebar.vue
+++ b/packages/@vuepress/theme-default/components/Sidebar.vue
@@ -2,79 +2,21 @@
   <aside class="sidebar">
     <NavLinks/>
     <slot name="top"/>
-    <ul class="sidebar-links" v-if="items.length">
-      <li v-for="(item, i) in items" :key="i">
-        <SidebarGroup
-          v-if="item.type === 'group'"
-          :item="item"
-          :first="i === 0"
-          :open="i === openGroupIndex"
-          :collapsable="item.collapsable || item.collapsible"
-          @toggle="toggleGroup(i)"
-        />
-        <SidebarLink v-else :item="item"/>
-      </li>
-    </ul>
+    <SidebarLinks class="sidebar-links" :items="items"/>
     <slot name="bottom"/>
   </aside>
 </template>
 
 <script>
-import SidebarGroup from './SidebarGroup.vue'
-import SidebarLink from './SidebarLink.vue'
+import SidebarLinks from './SidebarLinks.vue'
 import NavLinks from './NavLinks.vue'
-import { isActive } from '../util'
 
 export default {
-  components: { SidebarGroup, SidebarLink, NavLinks },
+  name: 'Sidebar',
 
-  props: ['items'],
+  components: { SidebarLinks, NavLinks },
 
-  data () {
-    return {
-      openGroupIndex: 0
-    }
-  },
-
-  created () {
-    this.refreshIndex()
-  },
-
-  watch: {
-    '$route' () {
-      this.refreshIndex()
-    }
-  },
-
-  methods: {
-    refreshIndex () {
-      const index = resolveOpenGroupIndex(
-        this.$route,
-        this.items
-      )
-      if (index > -1) {
-        this.openGroupIndex = index
-      }
-    },
-
-    toggleGroup (index) {
-      this.openGroupIndex = index === this.openGroupIndex ? -1 : index
-    },
-
-    isActive (page) {
-      return isActive(this.$route, page.regularPath)
-    }
-  }
-}
-
-function resolveOpenGroupIndex (route, items) {
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i]
-    if (item.type === 'group' && item.children.some(c => isActive(route, c.path))) {
-      return i
-    }
-  }
-  return -1
+  props: ['items']
 }
 </script>
 
diff --git a/packages/@vuepress/theme-default/components/SidebarGroup.vue b/packages/@vuepress/theme-default/components/SidebarGroup.vue
index 9c0ffc001f..af2e9e16f4 100644
--- a/packages/@vuepress/theme-default/components/SidebarGroup.vue
+++ b/packages/@vuepress/theme-default/components/SidebarGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <section
     class="sidebar-group"
-    :class="{ first, collapsable }"
+    :class="{ collapsable }"
   >
     <router-link
       class="sidebar-heading clickable"
@@ -36,28 +36,28 @@
     </p>
 
     <DropdownTransition>
-      <ul
-        ref="items"
+      <SidebarLinks
         class="sidebar-group-items"
+        :items="item.children"
         v-if="open || !collapsable"
-      >
-        <li v-for="child in item.children">
-          <SidebarLink :item="child"/>
-        </li>
-      </ul>
+        :sidebarDepth="item.sidebarDepth"
+      />
     </DropdownTransition>
   </section>
 </template>
 
 <script>
 import { isActive } from '../util'
-import SidebarLink from './SidebarLink.vue'
 import DropdownTransition from './DropdownTransition.vue'
 
 export default {
   name: 'SidebarGroup',
-  props: ['item', 'first', 'open', 'collapsable'],
-  components: { SidebarLink, DropdownTransition },
+  props: ['item', 'open', 'collapsable'],
+  components: { DropdownTransition },
+  // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
+  beforeCreate () {
+    this.$options.components.SidebarLinks = require('./SidebarLinks.vue').default
+  },
   methods: { isActive }
 }
 </script>
@@ -78,7 +78,7 @@ export default {
   font-size 1.1em
   font-weight bold
   // text-transform uppercase
-  padding 0.35rem 1.5rem
+  padding 0.35rem 1.5rem 0.35rem 1.25rem
   width 100%
   box-sizing border-box
   margin 0
diff --git a/packages/@vuepress/theme-default/components/SidebarLink.vue b/packages/@vuepress/theme-default/components/SidebarLink.vue
index 0a38894306..6fb03149b5 100644
--- a/packages/@vuepress/theme-default/components/SidebarLink.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLink.vue
@@ -4,7 +4,7 @@ import { isActive, hashRE, groupHeaders } from '../util'
 export default {
   functional: true,
 
-  props: ['item'],
+  props: ['item', 'sidebarDepth'],
 
   render (h,
     {
@@ -16,7 +16,8 @@ export default {
         $themeLocaleConfig
       },
       props: {
-        item
+        item,
+        sidebarDepth
       }
     }) {
     // use custom active class matching logic
@@ -28,9 +29,16 @@ export default {
       ? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
       : selfActive
     const link = renderLink(h, item.path, item.title || item.path, active)
-    const configDepth = $page.frontmatter.sidebarDepth != null
-      ? $page.frontmatter.sidebarDepth
-      : ($themeLocaleConfig.sidebarDepth || $themeConfig.sidebarDepth)
+
+    let configDepth
+    if ($page.frontmatter.sidebarDepth != null) {
+      configDepth = $page.frontmatter.sidebarDepth
+    } else if (sidebarDepth != null) {
+      configDepth = sidebarDepth
+    } else {
+      configDepth = $themeLocaleConfig.sidebarDepth || $themeConfig.sidebarDepth
+    }
+
     const maxDepth = configDepth == null ? 1 : configDepth
 
     const displayAllHeaders = !!$themeLocaleConfig.displayAllHeaders
diff --git a/packages/@vuepress/theme-default/components/SidebarLinks.vue b/packages/@vuepress/theme-default/components/SidebarLinks.vue
new file mode 100644
index 0000000000..2925cee50a
--- /dev/null
+++ b/packages/@vuepress/theme-default/components/SidebarLinks.vue
@@ -0,0 +1,79 @@
+<template>
+  <ul v-if="items.length">
+    <li v-for="(item, i) in items" :key="i">
+      <SidebarGroup
+        v-if="item.type === 'group'"
+        :item="item"
+        :first="i === 0"
+        :open="i === openGroupIndex"
+        :collapsable="item.collapsable || item.collapsible"
+        @toggle="toggleGroup(i)"
+      />
+      <SidebarLink
+        v-else
+        :sidebarDepth="sidebarDepth"
+        :item="item"
+      />
+    </li>
+  </ul>
+</template>
+
+<script>
+import SidebarGroup from './SidebarGroup.vue'
+import SidebarLink from './SidebarLink.vue'
+import { isActive } from '../util'
+
+export default {
+  name: 'SidebarLinks',
+
+  components: { SidebarGroup, SidebarLink },
+
+  props: ['items', 'sidebarDepth'],
+
+  data () {
+    return {
+      openGroupIndex: 0
+    }
+  },
+
+  created () {
+    this.refreshIndex()
+  },
+
+  watch: {
+    '$route' () {
+      this.refreshIndex()
+    }
+  },
+
+  methods: {
+    refreshIndex () {
+      const index = resolveOpenGroupIndex(
+        this.$route,
+        this.items
+      )
+      if (index > -1) {
+        this.openGroupIndex = index
+      }
+    },
+
+    toggleGroup (index) {
+      this.openGroupIndex = index === this.openGroupIndex ? -1 : index
+    },
+
+    isActive (page) {
+      return isActive(this.$route, page.regularPath)
+    }
+  }
+}
+
+function resolveOpenGroupIndex (route, items) {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (item.type === 'group' && item.children.some(c => c.type === 'page' && isActive(route, c.path))) {
+      return i
+    }
+  }
+  return -1
+}
+</script>
diff --git a/packages/@vuepress/theme-default/util/index.js b/packages/@vuepress/theme-default/util/index.js
index 8fccc69002..1794b1f226 100644
--- a/packages/@vuepress/theme-default/util/index.js
+++ b/packages/@vuepress/theme-default/util/index.js
@@ -208,7 +208,7 @@ function ensureEndingSlash (path) {
     : path + '/'
 }
 
-function resolveItem (item, pages, base, isNested) {
+function resolveItem (item, pages, base, groupDepth = 1) {
   if (typeof item === 'string') {
     return resolvePage(pages, item, base)
   } else if (Array.isArray(item)) {
@@ -216,10 +216,9 @@ function resolveItem (item, pages, base, isNested) {
       title: item[1]
     })
   } else {
-    if (isNested) {
+    if (groupDepth > 3) {
       console.error(
-        '[vuepress] Nested sidebar groups are not supported. ' +
-        'Consider using navbar + categories instead.'
+        '[vuepress] detected a too deep nested sidebar group.'
       )
     }
     const children = item.children || []
@@ -227,7 +226,8 @@ function resolveItem (item, pages, base, isNested) {
       type: 'group',
       path: item.path,
       title: item.title,
-      children: children.map(child => resolveItem(child, pages, base, true)),
+      sidebarDepth: item.sidebarDepth,
+      children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
       collapsable: item.collapsable !== false
     }
   }

From a75c0b1692908f2870c9c087a7e7eb959a6c4107 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 22:00:42 +0800
Subject: [PATCH 05/12] docs: set sidebarDepth: 2 for theme part

---
 packages/docs/docs/.vuepress/config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docs/docs/.vuepress/config.js b/packages/docs/docs/.vuepress/config.js
index a3d43ae868..f12074bde8 100644
--- a/packages/docs/docs/.vuepress/config.js
+++ b/packages/docs/docs/.vuepress/config.js
@@ -155,6 +155,7 @@ function getThemeSidebar (groupA, introductionA) {
     {
       title: groupA,
       collapsable: false,
+      sidebarDepth: 2,
       children: [
         ['', introductionA],
         'using-a-theme',

From 18eb6e7ae8b3917a702850bbeb7c066f60f706f2 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 22:32:44 +0800
Subject: [PATCH 06/12] chore: tweak code style

---
 .eslintrc.js                                  |  3 +-
 .../theme-default/components/Page.vue         | 32 +++++++++----------
 .../theme-default/components/SidebarLink.vue  | 12 +++----
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index a694c834af..0d87945da5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
   ],
   rules: {
     indent: ['error', 2, { MemberExpression: 'off' }],
-    "no-undef": ["error"]
+    "no-undef": ["error"],
+    'operator-linebreak': ["error", "before"]
   }
 }
diff --git a/packages/@vuepress/theme-default/components/Page.vue b/packages/@vuepress/theme-default/components/Page.vue
index c0d622a3ac..55710db3cc 100644
--- a/packages/@vuepress/theme-default/components/Page.vue
+++ b/packages/@vuepress/theme-default/components/Page.vue
@@ -129,9 +129,9 @@ export default {
 
     editLinkText () {
       return (
-        this.$themeLocaleConfig.editLinkText ||
-        this.$site.themeConfig.editLinkText ||
-        `Edit this page`
+        this.$themeLocaleConfig.editLinkText
+        || this.$site.themeConfig.editLinkText
+        || `Edit this page`
       )
     }
   },
@@ -144,12 +144,12 @@ export default {
           ? docsRepo
           : repo
         return (
-          base.replace(endingSlashRE, '') +
-           `/src` +
-           `/${docsBranch}` +
-           (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') +
-           path +
-           `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
+          base.replace(endingSlashRE, '')
+           + `/src`
+           + `/${docsBranch}`
+           + (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '')
+           + path
+           + `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
         )
       }
 
@@ -158,10 +158,10 @@ export default {
         : `https://github.com/${docsRepo}`
 
       return (
-        base.replace(endingSlashRE, '') +
-        `/edit/${docsBranch}` +
-        (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') +
-        path
+        base.replace(endingSlashRE, '')
+        + `/edit/${docsBranch}`
+        + (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '')
+        + path
       )
     }
   }
@@ -177,7 +177,7 @@ function resolveNext (page, items) {
 
 function find (page, items, offset) {
   const res = []
-  flatternItems(items, res)
+  flattern(items, res)
   for (let i = 0; i < res.length; i++) {
     const cur = res[i]
     if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
@@ -186,10 +186,10 @@ function find (page, items, offset) {
   }
 }
 
-function flatternItems (items, res) {
+function flattern (items, res) {
   for (let i = 0, l = items.length; i < l; i++) {
     if (items[i].type === 'group') {
-      flatternItems(items[i].children, res)
+      flattern(items[i].children || [], res)
     } else {
       res.push(items[i])
     }
diff --git a/packages/@vuepress/theme-default/components/SidebarLink.vue b/packages/@vuepress/theme-default/components/SidebarLink.vue
index 6fb03149b5..f0ea0be997 100644
--- a/packages/@vuepress/theme-default/components/SidebarLink.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLink.vue
@@ -30,14 +30,10 @@ export default {
       : selfActive
     const link = renderLink(h, item.path, item.title || item.path, active)
 
-    let configDepth
-    if ($page.frontmatter.sidebarDepth != null) {
-      configDepth = $page.frontmatter.sidebarDepth
-    } else if (sidebarDepth != null) {
-      configDepth = sidebarDepth
-    } else {
-      configDepth = $themeLocaleConfig.sidebarDepth || $themeConfig.sidebarDepth
-    }
+    const configDepth = $page.frontmatter.sidebarDepth
+      || sidebarDepth
+      || $themeLocaleConfig.sidebarDepth
+      || $themeConfig.sidebarDepth
 
     const maxDepth = configDepth == null ? 1 : configDepth
 

From b5532ca3887e943951d176dcf3cb5becf106443f Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 22:35:04 +0800
Subject: [PATCH 07/12] chore: tweaks

---
 packages/@vuepress/theme-default/components/SidebarLink.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/@vuepress/theme-default/components/SidebarLink.vue b/packages/@vuepress/theme-default/components/SidebarLink.vue
index f0ea0be997..6bed8bf190 100644
--- a/packages/@vuepress/theme-default/components/SidebarLink.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLink.vue
@@ -37,7 +37,9 @@ export default {
 
     const maxDepth = configDepth == null ? 1 : configDepth
 
-    const displayAllHeaders = !!$themeLocaleConfig.displayAllHeaders
+    const displayAllHeaders = $themeLocaleConfig.displayAllHeaders
+      || $themeConfig.displayAllHeaders
+
     if (item.type === 'auto') {
       return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
     } else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {

From d3d839d8f0c21c0e8b10fad3ac907d7fb1703795 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 22:35:53 +0800
Subject: [PATCH 08/12] chore: tweaks

---
 packages/@vuepress/theme-default/components/SidebarLinks.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@vuepress/theme-default/components/SidebarLinks.vue b/packages/@vuepress/theme-default/components/SidebarLinks.vue
index 2925cee50a..2d491f0274 100644
--- a/packages/@vuepress/theme-default/components/SidebarLinks.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLinks.vue
@@ -4,7 +4,6 @@
       <SidebarGroup
         v-if="item.type === 'group'"
         :item="item"
-        :first="i === 0"
         :open="i === openGroupIndex"
         :collapsable="item.collapsable || item.collapsible"
         @toggle="toggleGroup(i)"

From bc109695dbbc0aab8c1e6b7e038c32f392d6970b Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 23:30:42 +0800
Subject: [PATCH 09/12] chore: revert eslint change

---
 .eslintrc.js                                  |  3 +--
 .../theme-default/components/Page.vue         | 26 +++++++++----------
 .../theme-default/components/SidebarLink.vue  | 12 ++++-----
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0d87945da5..a694c834af 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,7 +6,6 @@ module.exports = {
   ],
   rules: {
     indent: ['error', 2, { MemberExpression: 'off' }],
-    "no-undef": ["error"],
-    'operator-linebreak': ["error", "before"]
+    "no-undef": ["error"]
   }
 }
diff --git a/packages/@vuepress/theme-default/components/Page.vue b/packages/@vuepress/theme-default/components/Page.vue
index 55710db3cc..d1d0649ebc 100644
--- a/packages/@vuepress/theme-default/components/Page.vue
+++ b/packages/@vuepress/theme-default/components/Page.vue
@@ -129,9 +129,9 @@ export default {
 
     editLinkText () {
       return (
-        this.$themeLocaleConfig.editLinkText
-        || this.$site.themeConfig.editLinkText
-        || `Edit this page`
+        this.$themeLocaleConfig.editLinkText ||
+        this.$site.themeConfig.editLinkText ||
+        `Edit this page`
       )
     }
   },
@@ -144,12 +144,12 @@ export default {
           ? docsRepo
           : repo
         return (
-          base.replace(endingSlashRE, '')
-           + `/src`
-           + `/${docsBranch}`
-           + (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '')
-           + path
-           + `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
+          base.replace(endingSlashRE, '') +
+           `/src` +
+           `/${docsBranch}` +
+           (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') +
+           path +
+           `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
         )
       }
 
@@ -158,10 +158,10 @@ export default {
         : `https://github.com/${docsRepo}`
 
       return (
-        base.replace(endingSlashRE, '')
-        + `/edit/${docsBranch}`
-        + (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '')
-        + path
+        base.replace(endingSlashRE, '') +
+        `/edit/${docsBranch}` +
+        (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') +
+        path
       )
     }
   }
diff --git a/packages/@vuepress/theme-default/components/SidebarLink.vue b/packages/@vuepress/theme-default/components/SidebarLink.vue
index 6bed8bf190..4c318ac41b 100644
--- a/packages/@vuepress/theme-default/components/SidebarLink.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLink.vue
@@ -30,15 +30,15 @@ export default {
       : selfActive
     const link = renderLink(h, item.path, item.title || item.path, active)
 
-    const configDepth = $page.frontmatter.sidebarDepth
-      || sidebarDepth
-      || $themeLocaleConfig.sidebarDepth
-      || $themeConfig.sidebarDepth
+    const configDepth = $page.frontmatter.sidebarDepth ||
+      sidebarDepth ||
+      $themeLocaleConfig.sidebarDepth ||
+      $themeConfig.sidebarDepth
 
     const maxDepth = configDepth == null ? 1 : configDepth
 
-    const displayAllHeaders = $themeLocaleConfig.displayAllHeaders
-      || $themeConfig.displayAllHeaders
+    const displayAllHeaders = $themeLocaleConfig.displayAllHeaders ||
+      $themeConfig.displayAllHeaders
 
     if (item.type === 'auto') {
       return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]

From 82e003635e09e77c07b2163854bd2df1ef2e1a86 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 3 Feb 2019 23:54:43 +0800
Subject: [PATCH 10/12] style: refine styles of nested sidebar groups

---
 .../theme-default/components/Sidebar.vue       |  8 +++++---
 .../theme-default/components/SidebarGroup.vue  | 18 +++++++++++++++---
 .../theme-default/components/SidebarLinks.vue  |  5 ++++-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/Sidebar.vue b/packages/@vuepress/theme-default/components/Sidebar.vue
index 32a9fcf993..85c86a6644 100644
--- a/packages/@vuepress/theme-default/components/Sidebar.vue
+++ b/packages/@vuepress/theme-default/components/Sidebar.vue
@@ -2,7 +2,7 @@
   <aside class="sidebar">
     <NavLinks/>
     <slot name="top"/>
-    <SidebarLinks class="sidebar-links" :items="items"/>
+    <SidebarLinks :items="items"/>
     <slot name="bottom"/>
   </aside>
 </template>
@@ -39,8 +39,10 @@ export default {
       line-height 1.25rem
       font-size 1.1em
       padding 0.5rem 0 0.5rem 1.5rem
-  .sidebar-links
+  & > .sidebar-links
     padding 1.5rem 0
+    & > li:not(:first-child)
+      margin-top .75rem
 
 @media (max-width: $MQMobile)
   .sidebar
@@ -48,6 +50,6 @@ export default {
       display block
       .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
         top calc(1rem - 2px)
-    .sidebar-links
+    & > .sidebar-links
       padding 1rem 0
 </style>
diff --git a/packages/@vuepress/theme-default/components/SidebarGroup.vue b/packages/@vuepress/theme-default/components/SidebarGroup.vue
index af2e9e16f4..88fdfe2f9c 100644
--- a/packages/@vuepress/theme-default/components/SidebarGroup.vue
+++ b/packages/@vuepress/theme-default/components/SidebarGroup.vue
@@ -4,13 +4,13 @@
     :class="{ collapsable }"
   >
     <router-link
+      v-if="item.path"
       class="sidebar-heading clickable"
       :class="{
         open,
         'active': isActive($route, item.path)
       }"
       :to="item.path"
-      v-if="item.path"
       @click.native="$emit('toggle')"
     >
       <span>{{ item.title }}</span>
@@ -70,6 +70,20 @@ export default {
     .sidebar-heading:not(.clickable)
       cursor auto
       color inherit
+  // refine styles of nested sidebar groups
+  & > .sidebar-links > li > .sidebar-group
+    padding-left 0
+    & > .sidebar-heading
+      font-size 15px
+      font-weight normal
+      padding-left 2rem
+      &:not(.clickable)
+        opacity 0.5
+    & > .sidebar-group-items
+      padding-left 1rem
+      & > li > .sidebar-link
+        font-size: 0.95em;
+        border-left none
 
 .sidebar-heading
   color #999
@@ -89,8 +103,6 @@ export default {
     position relative
     top -0.12em
     left 0.5em
-  &:.open .arrow
-    top -0.18em
   &.clickable
     &.active
       font-weight 600
diff --git a/packages/@vuepress/theme-default/components/SidebarLinks.vue b/packages/@vuepress/theme-default/components/SidebarLinks.vue
index 2d491f0274..8b32ee8fd1 100644
--- a/packages/@vuepress/theme-default/components/SidebarLinks.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLinks.vue
@@ -1,5 +1,8 @@
 <template>
-  <ul v-if="items.length">
+  <ul
+    class="sidebar-links"
+    v-if="items.length"
+  >
     <li v-for="(item, i) in items" :key="i">
       <SidebarGroup
         v-if="item.type === 'group'"

From 2fbf2ed138ff73207aa6d430e3cb85c29a4dbb97 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Mon, 4 Feb 2019 00:17:22 +0800
Subject: [PATCH 11/12] docs: update

---
 packages/docs/docs/theme/default-theme-config.md    | 12 ++++++++++--
 packages/docs/docs/zh/theme/default-theme-config.md | 12 ++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
index e921d46ce2..818b1f6b6a 100644
--- a/packages/docs/docs/theme/default-theme-config.md
+++ b/packages/docs/docs/theme/default-theme-config.md
@@ -180,8 +180,10 @@ module.exports = {
   themeConfig: {
     sidebar: [
       {
-        title: 'Group 1',
-        collapsable: false,
+        title: 'Group 1',   // required
+        path: '/foo/'       // optional, which should be a absolute path.
+        collapsable: false, // optional, defaults to true
+        sidebarDepth: 1,    // optional, defaults to 1
         children: [
           '/'
         ]
@@ -197,6 +199,12 @@ module.exports = {
 
 Sidebar groups are collapsable by default. You can force a group to be always open with `collapsable: false`.
 
+A sidebar group config also supports [sidebarDepth](#nested-header-links) field to override the default sidebar depth (`1`).
+
+::: tip
+   From `1.0.0-alpha-36` on, nested sidebar group <Badge text="beta"/> is also supported, but the nesting depth should be less than 3, otherwise the console will receive a warning.
+:::
+
 ### Multiple Sidebars
 
 If you wish to display different sidebars for different sections of content, first organize your pages into directories for each desired section:
diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md
index a7b36de431..6455c27f6f 100644
--- a/packages/docs/docs/zh/theme/default-theme-config.md
+++ b/packages/docs/docs/zh/theme/default-theme-config.md
@@ -177,8 +177,10 @@ module.exports = {
   themeConfig: {
     sidebar: [
       {
-        title: 'Group 1',
-        collapsable: false,
+        title: 'Group 1',   // 必要的
+        path: '/foo/'       // 可选的, 应该是一个绝对路径
+        collapsable: false, // 可选的, 默认值是 true,
+        sidebarDepth: 1,    // 可选的, 默认值是 1
         children: [
           '/'
         ]
@@ -194,6 +196,12 @@ module.exports = {
 
 侧边栏的每个子组默认是可折叠的，你可以设置 `collapsable: false` 来让一个组永远都是展开状态。
 
+一个侧边栏的子组配置同时支持 [sidebarDepth](#nested-header-links) 字段用于重写默认显示的侧边栏深度(`1`)。
+
+::: tip
+  从 `1.0.0-alpha-36` 开始，嵌套的侧边栏分组 <Badge text="beta"/> 也是支持的，但嵌套深度应小于 3，否则在控制台会收到警告。
+:::
+
 ### 多个侧边栏
 
 如果你想为不同的页面组来显示不同的侧边栏，首先，将你的页面文件组织成下述的目录结构：

From 96e7d4ea2aafc760dbae135ac8a0c7add744a55a Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Mon, 4 Feb 2019 00:41:50 +0800
Subject: [PATCH 12/12] style: enhancement

---
 .../theme-default/components/Sidebar.vue      |  2 +-
 .../theme-default/components/SidebarGroup.vue | 20 +++++++++++++++----
 .../theme-default/components/SidebarLink.vue  |  1 +
 .../theme-default/components/SidebarLinks.vue |  7 ++++++-
 .../@vuepress/theme-default/styles/theme.styl |  2 +-
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/Sidebar.vue b/packages/@vuepress/theme-default/components/Sidebar.vue
index 85c86a6644..1976143558 100644
--- a/packages/@vuepress/theme-default/components/Sidebar.vue
+++ b/packages/@vuepress/theme-default/components/Sidebar.vue
@@ -2,7 +2,7 @@
   <aside class="sidebar">
     <NavLinks/>
     <slot name="top"/>
-    <SidebarLinks :items="items"/>
+    <SidebarLinks :depth="0" :items="items"/>
     <slot name="bottom"/>
   </aside>
 </template>
diff --git a/packages/@vuepress/theme-default/components/SidebarGroup.vue b/packages/@vuepress/theme-default/components/SidebarGroup.vue
index 88fdfe2f9c..3cc11c4b12 100644
--- a/packages/@vuepress/theme-default/components/SidebarGroup.vue
+++ b/packages/@vuepress/theme-default/components/SidebarGroup.vue
@@ -1,7 +1,13 @@
 <template>
   <section
     class="sidebar-group"
-    :class="{ collapsable }"
+    :class="[
+      {
+        collapsable,
+        'is-sub-group': depth !== 0
+      },
+      `depth-${depth}`
+    ]"
   >
     <router-link
       v-if="item.path"
@@ -41,6 +47,7 @@
         :items="item.children"
         v-if="open || !collapsable"
         :sidebarDepth="item.sidebarDepth"
+        :depth="depth + 1"
       />
     </DropdownTransition>
   </section>
@@ -52,7 +59,7 @@ import DropdownTransition from './DropdownTransition.vue'
 
 export default {
   name: 'SidebarGroup',
-  props: ['item', 'open', 'collapsable'],
+  props: ['item', 'open', 'collapsable', 'depth'],
   components: { DropdownTransition },
   // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
   beforeCreate () {
@@ -71,10 +78,11 @@ export default {
       cursor auto
       color inherit
   // refine styles of nested sidebar groups
-  & > .sidebar-links > li > .sidebar-group
+  &.is-sub-group
     padding-left 0
     & > .sidebar-heading
-      font-size 15px
+      font-size 0.95em
+      line-height 1.4
       font-weight normal
       padding-left 2rem
       &:not(.clickable)
@@ -84,6 +92,9 @@ export default {
       & > li > .sidebar-link
         font-size: 0.95em;
         border-left none
+  &.depth-2
+    & > .sidebar-heading
+      border-left none
 
 .sidebar-heading
   color #999
@@ -113,5 +124,6 @@ export default {
 
 .sidebar-group-items
   transition height .1s ease-out
+  font-size 0.95em
   overflow hidden
 </style>
diff --git a/packages/@vuepress/theme-default/components/SidebarLink.vue b/packages/@vuepress/theme-default/components/SidebarLink.vue
index 4c318ac41b..6a45295cac 100644
--- a/packages/@vuepress/theme-default/components/SidebarLink.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLink.vue
@@ -83,6 +83,7 @@ function renderChildren (h, children, path, route, maxDepth, depth = 1) {
   font-size 0.95em
 
 a.sidebar-link
+  font-size 1em
   font-weight 400
   display inline-block
   color $textColor
diff --git a/packages/@vuepress/theme-default/components/SidebarLinks.vue b/packages/@vuepress/theme-default/components/SidebarLinks.vue
index 8b32ee8fd1..5cb9d474c4 100644
--- a/packages/@vuepress/theme-default/components/SidebarLinks.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLinks.vue
@@ -9,6 +9,7 @@
         :item="item"
         :open="i === openGroupIndex"
         :collapsable="item.collapsable || item.collapsible"
+        :depth="depth"
         @toggle="toggleGroup(i)"
       />
       <SidebarLink
@@ -30,7 +31,11 @@ export default {
 
   components: { SidebarGroup, SidebarLink },
 
-  props: ['items', 'sidebarDepth'],
+  props: [
+    'items',
+    'depth',  // depth of current sidebar links
+    'sidebarDepth' // depth of headers to be extracted
+  ],
 
   data () {
     return {
diff --git a/packages/@vuepress/theme-default/styles/theme.styl b/packages/@vuepress/theme-default/styles/theme.styl
index 1f552a3ed3..d2451ed58a 100644
--- a/packages/@vuepress/theme-default/styles/theme.styl
+++ b/packages/@vuepress/theme-default/styles/theme.styl
@@ -40,7 +40,7 @@ body
   display none
 
 .sidebar
-  font-size 15px
+  font-size 16px
   background-color #fff
   width $sidebarWidth
   position fixed