Skip to content

Commit

Permalink
feat: support nesting in sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Apr 9, 2018
1 parent 11c6528 commit 1964709
Show file tree
Hide file tree
Showing 7 changed files with 254 additions and 217 deletions.
35 changes: 4 additions & 31 deletions lib/default-theme/Layout.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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 })
Expand All @@ -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>
143 changes: 143 additions & 0 deletions lib/default-theme/SideBar.vue
Original file line number Diff line number Diff line change
@@ -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>
78 changes: 0 additions & 78 deletions lib/default-theme/nprogress.css

This file was deleted.

53 changes: 0 additions & 53 deletions lib/default-theme/resolveSidebar.js

This file was deleted.

6 changes: 6 additions & 0 deletions lib/default-theme/styles/config.stylus
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
$textColor = #2c3e50
$accentColor = darken(#41b883, 5%)
$borderColor = #eaecef
$codeBgColor = #282c34
$sidebarWidth = 20rem
$contentWidth = 760px
46 changes: 46 additions & 0 deletions lib/default-theme/styles/nprogress.stylus
Original file line number Diff line number Diff line change
@@ -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)
Loading

0 comments on commit 1964709

Please sign in to comment.