Handle redirect to sub menu when click parent menu (#876)

* Handle redirect to sub menu when click parent menu

* renamed the function

* allow click on menu for desktop

* reset cache path when click menu item without submenu

* Fixes click parent menu with full expanded

* removed the expand submenu block segment

Author: Hoang Nguyen

src/components/menu/menu.js

@@ -47,7 +47,8 @@ export default {
     return {
       openKeys: [],
       selectedKeys: [],
-      cachedOpenKeys: []
+      cachedOpenKeys: [],
+      cachedPath: null
     }
   },
   computed: {
@@ -104,6 +105,7 @@ export default {
         })
       }
 
+      this.cachedPath = this.selectedKeys[0]
       this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
     },
 
@@ -123,36 +125,55 @@ export default {
       return (
         <Item {...{ key: menu.path }}>
           <router-link {...{ props }}>
-            {this.renderIcon(menu.meta.icon)}
+            {this.renderIcon(menu.meta.icon, menu)}
             <span>{this.$t(menu.meta.title)}</span>
           </router-link>
         </Item>
       )
     },
     renderSubMenu (menu) {
       const itemArr = []
+      const on = {
+        click: () => {
+          this.handleClickParentMenu(menu)
+        }
+      }
       if (!menu.hideChildrenInMenu) {
         menu.children.forEach(item => itemArr.push(this.renderItem(item)))
       }
       return (
         <SubMenu {...{ key: menu.path }}>
           <span slot="title">
-            {this.renderIcon(menu.meta.icon)}
-            <span>{this.$t(menu.meta.title)}</span>
+            {this.renderIcon(menu.meta.icon, menu)}
+            <span {...{ on: on }}>{this.$t(menu.meta.title)}</span>
           </span>
           {itemArr}
         </SubMenu>
       )
     },
-    renderIcon (icon) {
+    renderIcon (icon, menuItem) {
       if (icon === 'none' || icon === undefined) {
         return null
       }
       const props = {}
+      const on = {
+        click: () => {
+          this.handleClickParentMenu(menuItem)
+        }
+      }
       typeof (icon) === 'object' ? props.component = icon : props.type = icon
       return (
-        <Icon {... { props } }/>
+        <Icon {... { props, on } } />
       )
+    },
+    handleClickParentMenu (menuItem) {
+      if (this.cachedPath === menuItem.redirect) {
+        return
+      }
+      if (menuItem.redirect) {
+        this.cachedPath = menuItem.redirect
+        setTimeout(() => this.$router.push({ path: menuItem.path }))
+      }
     }
   },
   render () {