Fixed menu that all the other menus gets collapsed to keep the entire menu compact.

src/components/menu/SiderMenu.vue

@@ -15,7 +15,7 @@
     import SMenu from './index'
     export default {
         name: "SiderMenu",
-        components: {ALayoutSider, SMenu },
+        components: { ALayoutSider, SMenu },
         props: {
             collapsible: {
                 type: Boolean,

src/components/menu/index.js

@@ -28,12 +28,18 @@ export default {
   },
   data () {
     return {
-            rootSubmenuKeys: [],
       openKeys: [],
       selectedKeys: [],
       cachedOpenKeys: []
     }
   },
+  computed: {
+    rootSubmenuKeys: (vm) => {
+      let keys = []
+      vm.menu.forEach(item => keys.push(item.path))
+      return keys
+    }
+  },
   created () {
     this.updateMenu()
   },
@@ -53,39 +59,39 @@ export default {
   methods: {
     renderIcon: function (h, icon) {
       return icon === 'none' || icon === undefined ? null
-                : h( Icon, { props: { type: icon !== undefined ? icon : '' } })
+        : h(Icon, { props: { type: icon !== undefined ? icon : '' } })
     },
     renderMenuItem: function (h, menu, pIndex, index) {
-            return h( Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index },
+      return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index },
         [
           h(
             'router-link',
-                        { attrs: { to: { name: menu.name }  }},
+            { attrs: { to: { name: menu.name } } },
             [
               this.renderIcon(h, menu.meta.icon),
-                            h('span', [menu.meta.title])
+              h('span', [ menu.meta.title ])
             ]
           )
         ]
       )
     },
     renderSubMenu: function (h, menu, pIndex, index) {
-            var this2_ = this
-            var subItem = [h('span',
-                {slot: 'title'},
+      const this2_ = this;
+      let subItem = [ h('span',
+        { slot: 'title' },
         [
           this.renderIcon(h, menu.meta.icon),
-                    h('span', [menu.meta.title])
+          h('span', [ menu.meta.title ])
         ]
-            )]
-            var itemArr = []
-            var pIndex_ = pIndex + '_' + index
+      ) ]
+      let itemArr = []
+      let pIndex_ = pIndex + '_' + index
       menu.children.forEach(function (item, i) {
         itemArr.push(this2_.renderItem(h, item, pIndex_, i))
       })
       return h(
         SubMenu,
-                {key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index},
+        { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index },
         subItem.concat(itemArr)
       )
     },
@@ -95,8 +101,8 @@ export default {
       }
     },
     renderMenu: function (h, menuTree) {
-            var this2_ = this
-            var menuArr = []
+      const this2_ = this
+      let menuArr = []
       menuTree.forEach(function (menu, i) {
         if (!menu.hidden) {
           menuArr.push(this2_.renderItem(h, menu, '0', i))
@@ -109,12 +115,12 @@ export default {
       if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
         this.openKeys = openKeys
       } else {
-                this.openKeys = latestOpenKey ? [latestOpenKey] : []
+        this.openKeys = latestOpenKey ? [ latestOpenKey ] : []
       }
     },
     updateMenu () {
       let routes = this.$route.matched.concat()
-            this.selectedKeys = [routes.pop().path]
+      this.selectedKeys = [ routes.pop().path ]
       let openKeys = []
       routes.forEach((item) => {
         openKeys.push(item.path)