feat: support nesting in sidebar

lib/default-theme/Layout.vue

@@ -1,24 +1,6 @@
 <template>
   <div class="theme-container">
-    <div class="sidebar">
-      <ul>
-        <li v-for="item in sidebarItems">
-          <router-link v-if="item.type === 'page'" :to="item.path">
-            {{ item.title || item.path }}
-          </router-link>
-          <div class="sidebar-group" v-else-if="item.type === 'heading'">
-            <p class="sidebar-heading">{{ item.title }}</p>
-            <ul>
-              <li v-for="child in item.children">
-                <router-link v-if="child.type === 'page'" :to="child.path">
-                  {{ child.title || child.path }}
-                </router-link>
-              </li>
-            </ul>
-          </div>
-        </li>
-      </ul>
-    </div>
+    <SideBar/>
     <Index v-if="$page.path === '/index'" />
     <Page v-else />
   </div>
@@ -28,18 +10,10 @@
 import nprogress from 'nprogress'
 import Index from './Index.vue'
 import Page from './Page.vue'
-import resolveSidebar from './resolveSidebar'
+import SideBar from './SideBar.vue'
 
 export default {
-  components: { Index, Page },
-  computed: {
-    sidebarItems () {
-      return resolveSidebar(
-        this.$route,
-        this.$site
-      )
-    }
-  },
+  components: { Index, Page, SideBar },
   mounted () {
     nprogress.configure({ showSpinner: false })
 
@@ -57,6 +31,5 @@ export default {
 }
 </script>
 
-<style src="./nprogress.css"></style>
 <style src="prismjs/themes/prism-tomorrow.css"></style>
-<style src="./theme.stylus" lang="stylus"></style>
+<style src="./styles/theme.stylus" lang="stylus"></style>

lib/default-theme/SideBar.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="sidebar">
+    <ul>
+      <li v-for="(item, i) in sidebarItems">
+        <router-link v-if="item.type === 'page'" :to="item.path">
+          {{ item.title || item.path }}
+        </router-link>
+        <div v-else-if="item.type === 'heading'"
+          class="sidebar-group"
+          :class="{ first: i === 0 }">
+          <p class="sidebar-heading">{{ item.title }}</p>
+          <ul>
+            <li v-for="child in item.children">
+              <router-link v-if="child.type === 'page'" :to="child.path">
+                {{ child.title || child.path }}
+              </router-link>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+function resolveSidebar (route, site) {
+  const { pages, themeConfig } = site
+  const sidebarConfig = themeConfig.sidebar
+  if (!sidebarConfig) {
+    return pages
+  } else {
+    const matchingConfig = Array.isArray(sidebarConfig)
+      ? sidebarConfig
+      : resolveMatchingSidebar(route, sidebarConfig)
+    return matchingConfig.map(item => resolveItem(item, site.pages))
+  }
+}
+
+function resolveMatchingSidebar (route, sidebarConfig) {
+  for (const base in sidebarConfig) {
+    if (ensureEndingSlash(route.path).indexOf(base) === 0) {
+      return sidebarConfig[base]
+    }
+  }
+}
+
+function ensureEndingSlash (path) {
+  return /(\.html|\/)$/.test(path)
+    ? path
+    : path + '/'
+}
+
+function resolveItem (item, pages) {
+  if (typeof item === 'string') {
+    return resolvePage(pages, item)
+  } else if (Array.isArray(item)) {
+    return Object.assign(resolvePage(pages, item[0]), {
+      title: item[1]
+    })
+  } else {
+    const children = item.children || []
+    return {
+      type: 'heading',
+      title: item.title,
+      children: children.map(child => resolveItem(child, pages)),
+      collapsable: children.length && item.collapsable
+    }
+  }
+}
+
+function resolvePage (pages, rawPath) {
+  const path = normalize(rawPath)
+  for (let i = 0; i < pages.length; i++) {
+    if (normalize(pages[i].path) === path) {
+      return Object.assign({}, pages[i], {
+        type: 'page',
+        path: ensureExt(rawPath)
+      })
+    }
+  }
+}
+
+const hashRE = /#.*$/
+const extRE = /\.(md|html)$/
+const slashRE = /\/$/
+
+function normalize (path) {
+  return path
+    .replace(hashRE, '')
+    .replace(extRE, '')
+}
+
+function ensureExt (path) {
+  if (slashRE.test(path)) {
+    return path
+  }
+  const hashMatch = path.match(hashRE)
+  const hash = hashMatch ? hashMatch[0] : ''
+  return normalize(path) + '.html' + hash
+}
+
+export default {
+  computed: {
+    sidebarItems () {
+      return resolveSidebar(
+        this.$route,
+        this.$site
+      )
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@import './styles/config.stylus'
+
+.sidebar
+  ul
+    padding 0
+    margin 0
+    list-style-type none
+  a
+    display inline-block
+    color $textColor
+    border-left 0.25rem solid transparent
+    padding 0.25rem
+    padding-left 1.25rem
+    &:hover
+      color $accentColor
+    &.router-link-active
+      font-weight 600
+      color $accentColor
+      border-left-color $accentColor
+  .sidebar-group:not(.first)
+    margin-top 1.5rem
+  .sidebar-heading
+    font-size 1.1em
+    font-weight bold
+    text-transform uppercase
+    padding-left 1.5rem
+    margin-top 0
+    margin-bottom 0.5rem
+</style>

lib/default-theme/styles/config.stylus

@@ -0,0 +1,6 @@
+$textColor = #2c3e50
+$accentColor = darken(#41b883, 5%)
+$borderColor = #eaecef
+$codeBgColor = #282c34
+$sidebarWidth = 20rem
+$contentWidth = 760px

lib/default-theme/styles/nprogress.stylus

@@ -0,0 +1,46 @@
+#nprogress
+  pointer-events none
+  .bar
+    background $accentColor
+    position fixed
+    z-index 1031
+    top 0
+    left 0
+    width 100%
+    height 2px
+  .peg
+    display block
+    position absolute
+    right 0px
+    width 100px
+    height 100%
+    box-shadow 0 0 10px $accentColor, 0 0 5px $accentColor
+    opacity 1.0
+    transform rotate(3deg) translate(0px, -4px)
+  .spinner
+    display block
+    position fixed
+    z-index 1031
+    top 15px
+    right 15px
+  .spinner-icon
+    width 18px
+    height 18px
+    box-sizing border-box
+    border solid 2px transparent
+    border-top-color $accentColor
+    border-left-color $accentColor
+    border-radius 50%
+    animation nprogress-spinner 400ms linear infinite
+
+.nprogress-custom-parent
+  overflow hidden
+  position relative
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar
+  position absolute
+
+@keyframes nprogress-spinner
+  0% transform rotate(0deg)
+  100% transform rotate(360deg)