update left menu

src/@core/layouts/layout-vertical/components/vertical-nav-menu/VerticalNavMenu.vue

@@ -57,14 +57,6 @@
       </slot>
     </div>
     <!-- / main menu header-->
-
-    <div>
-      <vertical-nav-menu-items
-        :items.sync="current"
-        class="navigation navigation-main"
-      />
-    </div>
-
     <!-- main menu content-->
     <vue-perfect-scrollbar
       :settings="perfectScrollbarSettings"
@@ -73,10 +65,9 @@
       @ps-scroll-y="evt => { shallShadowBottom = evt.srcElement.scrollTop > 0 }"
     >
       <vertical-nav-menu-items
-        :items.sync="options"
+        :items.sync="navMenuItems"
         class="navigation navigation-main"
       />
-      <div style="height: 28rem;" />
     </vue-perfect-scrollbar>
     <!-- /main menu content-->
   </div>
@@ -156,24 +147,6 @@ export default {
       appLogoImage,
     }
   },
-  computed: {
-    current() {
-      const preload = []
-      const { selected } = this.$store.state.chains
-      const current = navMenuItems.find(x => (x.title === selected.chain_name))
-      // preload.push({ header: 'current' })
-      preload.push(current)
-      return preload
-    },
-    options() {
-      return navMenuItems.map(x => {
-        if (x.children) {
-          return { title: x.title, logo: x.icon, route: x.children[0].route }
-        }
-        return x
-      })
-    },
-  },
 }
 </script>
 

src/@core/layouts/layout-vertical/components/vertical-nav-menu/components/vertical-nav-menu-items/VerticalNavMenuItems.vue

@@ -2,7 +2,7 @@
   <ul>
     <component
       :is="resolveNavItemComponent(item)"
-      v-for="item in items"
+      v-for="item in menus"
       :key="item.header || item.title"
       :item="item"
     />
@@ -15,6 +15,7 @@ import { provide, ref } from '@vue/composition-api'
 import VerticalNavMenuHeader from '../vertical-nav-menu-header'
 import VerticalNavMenuLink from '../vertical-nav-menu-link/VerticalNavMenuLink.vue'
 import VerticalNavMenuGroup from '../vertical-nav-menu-group/VerticalNavMenuGroup.vue'
+import modules from '../../../../../modules'
 
 export default {
   components: {
@@ -30,10 +31,35 @@ export default {
   },
   setup() {
     provide('openGroups', ref([]))
-
     return {
       resolveNavItemComponent,
     }
   },
+  computed: {
+    menus() {
+      // pick current blockchain
+      const { selected } = this.$store.state.chains
+      const { excludes } = selected
+      const children = []
+      modules().forEach(m => {
+        if (excludes === undefined || excludes.indexOf(m.route) === -1) {
+          if (m.scope.match('normal') || m.scope.match(selected.chain_name)) {
+            children.push({
+              title: m.title,
+              route: { name: m.route, params: { chain: selected.chain_name } },
+            })
+          }
+        }
+      })
+      const current = {
+        title: selected.chain_name,
+        icon: selected.logo,
+        route: { name: selected.chain_name, params: { chain: selected.chain_name } },
+      }
+      current.children = children
+      // this.items.unshift(current)
+      return [{ header: 'dashboard' }, current, { header: 'ecosystem' }].concat(this.items)
+    },
+  },
 }
 </script>

src/@core/layouts/modules.js

@@ -0,0 +1,48 @@
+export default () => ([
+  {
+    scope: 'normal',
+    title: 'dashboard',
+    route: 'dashboard',
+  },
+  {
+    scope: 'normal',
+    title: 'blocks',
+    route: 'blocks',
+  },
+  {
+    scope: 'normal',
+    title: 'staking',
+    route: 'staking',
+  },
+  {
+    scope: 'normal',
+    title: 'governance',
+    route: 'governance',
+    exclude: 'emoney',
+  },
+  {
+    scope: 'normal',
+    title: 'uptime',
+    route: 'uptime',
+  },
+  {
+    scope: 'normal',
+    title: 'statesync',
+    route: 'statesync',
+  },
+  {
+    scope: 'normal',
+    title: 'parameters',
+    route: 'parameters',
+  },
+  {
+    scope: 'cos-mos',
+    title: 'gravity',
+    route: 'gravity',
+  },
+  {
+    scope: 'osmosis',
+    title: 'trade',
+    route: 'osmosis-trade',
+  },
+])

src/@core/layouts/utils.js

@@ -40,6 +40,8 @@ export const resolveNavDataRouteName = link => {
  * @param {Object} link nav-link object
  */
 export const isNavLinkActive = link => {
+  // only select one active nav
+  if (link.route && link.route.name === 'dashboard' && link.title !== link.route.name) return false
   // Matched routes array of current route
   const matchedRoutes = router.currentRoute.matched
 

src/libs/utils.js

@@ -359,7 +359,6 @@ export function formatTokenDenom(tokenDenom) {
       denom = nativeAsset.symbol
     } else {
       const config = Object.values(chains)
-      console.log(config, localStorage.getItem('selected_chain'))
       config.forEach(x => {
         if (x.assets) {
           const asset = x.assets.find(a => (a.base === denom))

src/navigation/vertical/index.js

@@ -1,72 +1,22 @@
 import store from '@/store'
 import { isTestnet } from '../../libs/utils'
 
-const modules = [
-  {
-    scope: 'normal',
-    title: 'summary',
-    route: 'info',
-  },
-  {
-    scope: 'normal',
-    title: 'blocks',
-    route: 'blocks',
-  },
-  {
-    scope: 'normal',
-    title: 'staking',
-    route: 'staking',
-  },
-  {
-    scope: 'normal',
-    title: 'governance',
-    route: 'governance',
-    exclude: 'emoney',
-  },
-  {
-    scope: 'normal',
-    title: 'uptime',
-    route: 'uptime',
-  },
-  {
-    scope: 'normal',
-    title: 'statesync',
-    route: 'statesync',
-  },
-  {
-    scope: 'cos-mos',
-    title: 'gravity',
-    route: 'gravity',
-  },
-  {
-    scope: 'osmosis',
-    title: 'trade',
-    route: 'osmosis-trade',
-  },
-]
-
 function processMenu() {
   const chainMenus = []
+  const blockchains = []
   Object.keys(store.state.chains.config).forEach(chain => {
     const menu = {
       title: chain,
-      icon: store.state.chains.config[chain].logo,
+      logo: store.state.chains.config[chain].logo,
+      route: { name: 'dashboard', params: { chain } },
     }
-    const { excludes } = store.state.chains.config[chain]
+    blockchains.push(menu)
-    const children = []
-    modules.forEach(m => {
-      if (excludes === undefined || excludes.indexOf(m.route) === -1) {
-        if (m.scope.match('normal') || m.scope.match(chain)) {
-          children.push({
-          // header: `item-${chain}-${m.route}`,
-            title: m.title,
-            route: { name: m.route, params: { chain } },
   })
-        }
+
-      }
+  chainMenus.push({
-    })
+    title: 'blockchains',
-    menu.children = children
+    children: blockchains,
-    chainMenus.push(menu)
+    icon: 'https://ping.pub/logo.svg',
   })
   chainMenus.push({ header: 'LINKS' })
   if (isTestnet()) {

src/router/index.js

@@ -120,7 +120,7 @@ const router = new VueRouter({
     // chain modules
     {
       path: '/:chain/',
-      name: 'info',
+      name: 'dashboard',
       alias: '/:chain',
       component: () => import('@/views/Summary.vue'),
       meta: {
@@ -133,6 +133,20 @@ const router = new VueRouter({
         ],
       },
     },
+    {
+      path: '/:chain/parameters',
+      name: 'parameters',
+      component: () => import('@/views/Summary.vue'),
+      meta: {
+        pageTitle: 'Parameters',
+        breadcrumb: [
+          {
+            text: 'Parameters',
+            active: true,
+          },
+        ],
+      },
+    },
     {
       path: '/:chain/statesync',
       name: 'statesync',