mirror of
https://github.com/wahyd4/vuepress.git
synced 2026-08-27 22:25:54 +10:00
ULIVZ
7f7fe18d40
1. Refine ExtendPageDataOption, simplify the implmentation 2. Introduce LayoutDistributor as the unique route layout entry 3. Inject layout components to LayoutDistributor 4. Register layout components located at themedir/layouts 5. Reorganize the default theme's structure
78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
class="sidebar-group"
|
|
:class="{ first, collapsable }"
|
|
>
|
|
<p
|
|
class="sidebar-heading"
|
|
:class="{ open }"
|
|
@click="$emit('toggle')"
|
|
>
|
|
<span>{{ item.title }}</span>
|
|
<span
|
|
class="arrow"
|
|
v-if="collapsable"
|
|
:class="open ? 'down' : 'right'">
|
|
</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>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SidebarLink from './SidebarLink.vue'
|
|
import DropdownTransition from './DropdownTransition.vue'
|
|
|
|
export default {
|
|
name: 'SidebarGroup',
|
|
props: ['item', 'first', 'open', 'collapsable'],
|
|
components: { SidebarLink, DropdownTransition }
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.sidebar-group
|
|
&:not(.first)
|
|
margin-top 1em
|
|
.sidebar-group
|
|
padding-left 0.5em
|
|
&:not(.collapsable)
|
|
.sidebar-heading
|
|
cursor auto
|
|
color inherit
|
|
|
|
.sidebar-heading
|
|
color #999
|
|
transition color .15s ease
|
|
cursor pointer
|
|
font-size 1.1em
|
|
font-weight bold
|
|
// text-transform uppercase
|
|
padding 0 1.5rem
|
|
margin-top 0
|
|
margin-bottom 0.5rem
|
|
&.open, &:hover
|
|
color inherit
|
|
.arrow
|
|
position relative
|
|
top -0.12em
|
|
left 0.5em
|
|
&:.open .arrow
|
|
top -0.18em
|
|
|
|
.sidebar-group-items
|
|
transition height .1s ease-out
|
|
overflow hidden
|
|
</style>
|