From 0c583d1fbb46dc8752900bdc1ad639c43fb117ea Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Sun, 21 Jan 2018 15:58:21 +0800
Subject: [PATCH] feat: click sidebar menu add collapse and expand, close #294

---
 src/core/event/index.js      |  1 +
 src/core/event/sidebar.js    | 19 ++++++++++++++-----
 src/themes/basic/_layout.css |  6 ++++++
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/core/event/index.js b/src/core/event/index.js
index 79e2d1f34..dec4fcb36 100644
--- a/src/core/event/index.js
+++ b/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 --git a/src/core/event/sidebar.js b/src/core/event/sidebar.js
index dd6d31a69..71dc94cae 100644
--- a/src/core/event/sidebar.js
+++ b/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 --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css
index dec39eb0d..368f465b5 100644
--- a/src/themes/basic/_layout.css
+++ b/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;