1 | <template>
|
2 | <section
|
3 | class="sidebar-group"
|
4 | :class="[
|
5 | {
|
6 | collapsable,
|
7 | 'is-sub-group': depth !== 0
|
8 | },
|
9 | `depth-${depth}`
|
10 | ]"
|
11 | >
|
12 | <RouterLink
|
13 | v-if="item.path"
|
14 | class="sidebar-heading clickable"
|
15 | :class="{
|
16 | open,
|
17 | 'active': isActive($route, item.path)
|
18 | }"
|
19 | :to="item.path"
|
20 | @click.native="$emit('toggle')"
|
21 | >
|
22 | <span>{{ item.title }}</span>
|
23 | <span
|
24 | v-if="collapsable"
|
25 | class="arrow"
|
26 | :class="open ? 'down' : 'right'"
|
27 | />
|
28 | </RouterLink>
|
29 |
|
30 | <p
|
31 | v-else
|
32 | class="sidebar-heading"
|
33 | :class="{ open }"
|
34 | @click="$emit('toggle')"
|
35 | >
|
36 | <span>{{ item.title }}</span>
|
37 | <span
|
38 | v-if="collapsable"
|
39 | class="arrow"
|
40 | :class="open ? 'down' : 'right'"
|
41 | />
|
42 | </p>
|
43 |
|
44 | <DropdownTransition>
|
45 | <SidebarLinks
|
46 | v-if="open || !collapsable"
|
47 | class="sidebar-group-items"
|
48 | :items="item.children"
|
49 | :sidebar-depth="item.sidebarDepth"
|
50 | :initial-open-group-index="item.initialOpenGroupIndex"
|
51 | :depth="depth + 1"
|
52 | />
|
53 | </DropdownTransition>
|
54 | </section>
|
55 | </template>
|
56 |
|
57 | <script>
|
58 | import { isActive } from '../util'
|
59 | import DropdownTransition from '@theme/components/DropdownTransition.vue'
|
60 |
|
61 | export default {
|
62 | name: 'SidebarGroup',
|
63 |
|
64 | components: {
|
65 | DropdownTransition
|
66 | },
|
67 |
|
68 | props: [
|
69 | 'item',
|
70 | 'open',
|
71 | 'collapsable',
|
72 | 'depth'
|
73 | ],
|
74 |
|
75 |
|
76 | beforeCreate () {
|
77 | this.$options.components.SidebarLinks = require('@theme/components/SidebarLinks.vue').default
|
78 | },
|
79 |
|
80 | methods: { isActive }
|
81 | }
|
82 | </script>
|
83 |
|
84 | <style lang="stylus">
|
85 | .sidebar-group
|
86 | .sidebar-group
|
87 | padding-left 0.5em
|
88 | &:not(.collapsable)
|
89 | .sidebar-heading:not(.clickable)
|
90 | cursor auto
|
91 | color inherit
|
92 | // refine styles of nested sidebar groups
|
93 | &.is-sub-group
|
94 | padding-left 0
|
95 | & > .sidebar-heading
|
96 | font-size 0.95em
|
97 | line-height 1.4
|
98 | font-weight normal
|
99 | padding-left 2rem
|
100 | &:not(.clickable)
|
101 | opacity 0.5
|
102 | & > .sidebar-group-items
|
103 | padding-left 1rem
|
104 | & > li > .sidebar-link
|
105 | font-size: 0.95em;
|
106 | border-left none
|
107 | &.depth-2
|
108 | & > .sidebar-heading
|
109 | border-left none
|
110 |
|
111 | .sidebar-heading
|
112 | color $textColor
|
113 | transition color .15s ease
|
114 | cursor pointer
|
115 | font-size 1.1em
|
116 | font-weight bold
|
117 | // text-transform uppercase
|
118 | padding 0.35rem 1.5rem 0.35rem 1.25rem
|
119 | width 100%
|
120 | box-sizing border-box
|
121 | margin 0
|
122 | border-left 0.25rem solid transparent
|
123 | &.open, &:hover
|
124 | color inherit
|
125 | .arrow
|
126 | position relative
|
127 | top -0.12em
|
128 | left 0.5em
|
129 | &.clickable
|
130 | &.active
|
131 | font-weight 600
|
132 | color $accentColor
|
133 | border-left-color $accentColor
|
134 | &:hover
|
135 | color $accentColor
|
136 |
|
137 | .sidebar-group-items
|
138 | transition height .1s ease-out
|
139 | font-size 0.95em
|
140 | overflow hidden
|
141 | </style>
|