feat: click sidebar menu add collapse and expand, close #294

This commit is contained in:
qingwei.li 2018-01-21 15:58:21 +08:00 committed by cinwell.li
commit 5e161a1420
3 changed files with 21 additions and 5 deletions

View file

@ -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)

View file

@ -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 () {

View file

@ -270,6 +270,12 @@ main {
padding-bottom: 40px;
}
li.collapse {
.app-sub-sidebar {
display: none;
}
}
ul {
margin: 0;
padding: 0;