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

Author: QingWei-Li

Diff for: src/core/event/index.js

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

Diff for: src/core/event/sidebar.js

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

Diff for: src/themes/basic/_layout.css

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