Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat($theme-default): refine sidebar groups #1257

Merged
merged 12 commits into from
Feb 3, 2019
Next Next commit
feat($theme-default): clickable heading for sidebar groups
ulivz committed Feb 3, 2019
commit 7a820e976295f7e486830515e700f35204c69c3c
63 changes: 44 additions & 19 deletions packages/@vuepress/theme-default/components/SidebarGroup.vue
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions packages/@vuepress/theme-default/util/index.js
Original file line number Diff line number Diff line change
@@ -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