feat: click sidebar menu add collapse and expand, close #294
This commit is contained in:
parent
820abeb0fd
commit
5e161a1420
3 changed files with 21 additions and 5 deletions
|
|
@ -13,6 +13,7 @@ export function eventMixin (proto) {
|
||||||
export function initEvent (vm) {
|
export function initEvent (vm) {
|
||||||
// Bind toggle button
|
// Bind toggle button
|
||||||
sidebar.btn('button.sidebar-toggle', vm.router)
|
sidebar.btn('button.sidebar-toggle', vm.router)
|
||||||
|
sidebar.collapse('.sidebar', vm.router)
|
||||||
// Bind sticky effect
|
// Bind sticky effect
|
||||||
if (vm.config.coverpage) {
|
if (vm.config.coverpage) {
|
||||||
!isMobile && on('scroll', sidebar.sticky)
|
!isMobile && on('scroll', sidebar.sticky)
|
||||||
|
|
|
||||||
|
|
@ -14,17 +14,26 @@ export function btn (el, router) {
|
||||||
toggle()
|
toggle()
|
||||||
})
|
})
|
||||||
|
|
||||||
const sidebar = dom.getNode('.sidebar')
|
|
||||||
|
|
||||||
isMobile &&
|
isMobile &&
|
||||||
dom.on(
|
dom.on(
|
||||||
dom.body,
|
dom.body,
|
||||||
'click',
|
'click',
|
||||||
_ => dom.body.classList.contains('close') && toggle()
|
_ => 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 () {
|
export function sticky () {
|
||||||
|
|
|
||||||
|
|
@ -270,6 +270,12 @@ main {
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li.collapse {
|
||||||
|
.app-sub-sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue