98 lines
2.3 KiB
Vue
98 lines
2.3 KiB
Vue
|
<script>
|
||
|
|
import { isActive } from '@theme/helpers/utils'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
functional: true,
|
||
|
|
|
||
|
|
props: ['item', 'sidebarDepth'],
|
||
|
|
|
||
|
|
render (h,
|
||
|
|
{
|
||
|
|
parent: {
|
||
|
|
$page,
|
||
|
|
$site,
|
||
|
|
$route,
|
||
|
|
$themeConfig,
|
||
|
|
$themeLocaleConfig
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
item,
|
||
|
|
sidebarDepth
|
||
|
|
}
|
||
|
|
}) {
|
||
|
|
// use custom active class matching logic
|
||
|
|
// due to edge case of paths ending with / + hash
|
||
|
|
const selfActive = isActive($route, item.path)
|
||
|
|
// for sidebar: auto pages, a hash link should be active if one of its child
|
||
|
|
// matches
|
||
|
|
const active = item.type === 'auto'
|
||
|
|
? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
|
||
|
|
: selfActive
|
||
|
|
const link = renderLink(h, item.path, item.title || item.path, active)
|
||
|
|
return link
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderLink (h, to, text, active) {
|
||
|
|
return h('router-link', {
|
||
|
|
props: {
|
||
|
|
to,
|
||
|
|
activeClass: '',
|
||
|
|
exactActiveClass: ''
|
||
|
|
},
|
||
|
|
class: {
|
||
|
|
active,
|
||
|
|
'sidebar-link': true
|
||
|
|
}
|
||
|
|
}, text)
|
||
|
|
}
|
||
|
|
|
||
|
|
// function renderChildren (h, children, path, route, maxDepth, depth = 1) {
|
||
|
|
// if (!children || depth > maxDepth) return null
|
||
|
|
// return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
|
||
|
|
// const active = isActive(route, path + '#' + c.slug)
|
||
|
|
// return h('li', { class: 'sidebar-sub-header' }, [
|
||
|
|
// renderLink(h, path + '#' + c.slug, c.title, active),
|
||
|
|
// renderChildren(h, c.children, path, route, maxDepth, depth + 1)
|
||
|
|
// ])
|
||
|
|
// }))
|
||
|
|
// }
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus">
|
||
|
|
.sidebar .sidebar-sub-headers
|
||
|
|
padding-left 1.5rem
|
||
|
|
font-size 0.95em
|
||
|
|
|
||
|
|
.sidebar-sub-headers a.sidebar-link
|
||
|
|
margin 0 1rem 0 0.6rem
|
||
|
|
|
||
|
|
a.sidebar-link
|
||
|
|
font-size 1em
|
||
|
|
font-weight 400
|
||
|
|
display block!important
|
||
|
|
color var(--text-color)
|
||
|
|
padding 0.35rem 1rem 0.35rem 2.25rem
|
||
|
|
line-height 1.7
|
||
|
|
background var(--background-color)
|
||
|
|
// margin 0 0 0 1.5rem
|
||
|
|
box-sizing: border-box
|
||
|
|
&:hover
|
||
|
|
color $accentColor
|
||
|
|
&.active
|
||
|
|
font-weight 600
|
||
|
|
color $accentColor
|
||
|
|
background var(--default-color-8)
|
||
|
|
border-right 3px solid $accentColor
|
||
|
|
.sidebar-group &
|
||
|
|
// padding-left 2rem
|
||
|
|
.sidebar-sub-headers &
|
||
|
|
padding-top 0.25rem
|
||
|
|
padding-bottom 0.25rem
|
||
|
|
border-left none
|
||
|
|
&.active
|
||
|
|
font-weight 500
|
||
|
|
background transparent
|
||
|
|
color $accentColor
|
||
|
|
</style>
|