| 1 | <template>
|
| 2 | <aside class="sidebar">
|
| 3 | <NavLinks />
|
| 4 |
|
| 5 | <slot name="top" />
|
| 6 |
|
| 7 | <SidebarLinks
|
| 8 | :depth="0"
|
| 9 | :items="items"
|
| 10 | />
|
| 11 | <slot name="bottom" />
|
| 12 | </aside>
|
| 13 | </template>
|
| 14 |
|
| 15 | <script>
|
| 16 | import SidebarLinks from '@theme/components/SidebarLinks.vue'
|
| 17 | import NavLinks from '@theme/components/NavLinks.vue'
|
| 18 |
|
| 19 | export default {
|
| 20 | name: 'Sidebar',
|
| 21 |
|
| 22 | components: { SidebarLinks, NavLinks },
|
| 23 |
|
| 24 | props: ['items']
|
| 25 | }
|
| 26 | </script>
|
| 27 |
|
| 28 | <style lang="stylus">
|
| 29 | .sidebar
|
| 30 | ul
|
| 31 | padding 0
|
| 32 | margin 0
|
| 33 | list-style-type none
|
| 34 | a
|
| 35 | display inline-block
|
| 36 | .nav-links
|
| 37 | display none
|
| 38 | border-bottom 1px solid $borderColor
|
| 39 | padding 0.5rem 0 0.75rem 0
|
| 40 | a
|
| 41 | font-weight 600
|
| 42 | .nav-item, .repo-link
|
| 43 | display block
|
| 44 | line-height 1.25rem
|
| 45 | font-size 1.1em
|
| 46 | padding 0.5rem 0 0.5rem 1.5rem
|
| 47 | & > .sidebar-links
|
| 48 | padding 1.5rem 0
|
| 49 | & > li > a.sidebar-link
|
| 50 | font-size 1.1em
|
| 51 | line-height 1.7
|
| 52 | font-weight bold
|
| 53 | & > li:not(:first-child)
|
| 54 | margin-top .75rem
|
| 55 |
|
| 56 | @media (max-width: $MQMobile)
|
| 57 | .sidebar
|
| 58 | .nav-links
|
| 59 | display block
|
| 60 | .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
|
| 61 | top calc(1rem - 2px)
|
| 62 | & > .sidebar-links
|
| 63 | padding 1rem 0
|
| 64 | </style>
|