Skip to content

Commit

Permalink
feat: click sidebar menu add collapse and expand, close #294
Browse files Browse the repository at this point in the history
  • Loading branch information
QingWei-Li committed Feb 11, 2018
1 parent 820abeb commit 5e161a1
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 5 deletions.
1 change: 1 addition & 0 deletions src/core/event/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export function eventMixin (proto) {
export function initEvent (vm) {
// Bind toggle button
sidebar.btn('button.sidebar-toggle', vm.router)
sidebar.collapse('.sidebar', vm.router)
// Bind sticky effect
if (vm.config.coverpage) {
!isMobile && on('scroll', sidebar.sticky)
Expand Down
19 changes: 14 additions & 5 deletions src/core/event/sidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,26 @@ export function btn (el, router) {
toggle()
})

const sidebar = dom.getNode('.sidebar')

isMobile &&
dom.on(
dom.body,
'click',
_ => dom.body.classList.contains('close') && toggle()
)
dom.on(sidebar, 'click', _ =>
setTimeout((_ => getAndActive(router, sidebar, true, true), 0))
)
}

export function collapse (el, router) {
el = dom.getNode(el)

dom.on(el, 'click', ({ target }) => {
if (
target.nodeName === 'A' &&
target.nextSibling &&
target.nextSibling.classList.contains('app-sub-sidebar')
) {
dom.toggleClass(target.parentNode, 'collapse')
}
})
}

export function sticky () {
Expand Down
6 changes: 6 additions & 0 deletions src/themes/basic/_layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,12 @@ main {
padding-bottom: 40px;
}

li.collapse {
.app-sub-sidebar {
display: none;
}
}

ul {
margin: 0;
padding: 0;
Expand Down

1 comment on commit 5e161a1

@jackple
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how to use?

Please sign in to comment.