Change left bar

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

@@ -58,6 +58,12 @@
     </div>
     <!-- / main menu header-->
 
+    <div>
+      <vertical-nav-menu-items
+        :items.sync="current"
+        class="navigation navigation-main"
+      />
+    </div>
     <!-- Shadow -->
     <div
       :class="{'d-block': shallShadowBottom}"
@@ -72,9 +78,10 @@
       @ps-scroll-y="evt => { shallShadowBottom = evt.srcElement.scrollTop > 0 }"
     >
       <vertical-nav-menu-items
-        :items.sync="leftMenu"
+        :items.sync="options"
         class="navigation navigation-main"
       />
+      <div style="height: 28rem;" />
     </vue-perfect-scrollbar>
     <!-- /main menu content-->
   </div>
@@ -155,13 +162,21 @@ export default {
     }
   },
   computed: {
-    leftMenu() {
+    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({ header: 'current' })
       preload.push(current)
-      return preload.concat(navMenuItems.filter(x => x.title !== selected.chain_name))
+      return preload
+    },
+    options() {
+      return navMenuItems.map(x => {
+        if (x.children) {
+          return { title: x.title, logo: x.icon, route: x.children[0].route }
+        }
+        return x
+      })
     },
   },
 }

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

@@ -11,8 +11,19 @@
       v-bind="linkProps"
       class="d-flex align-items-center"
     >
-      <feather-icon :icon="item.icon || 'ChevronRightIcon'" />
-      <span class="text-truncate">{{ t(item.title) }}</span>
+      <b-avatar
+        v-if="item.logo"
+        variant="transparent"
+        :src="item.logo"
+        icon="people-fill"
+        size="sm"
+        class="mr-1"
+      />
+      <feather-icon
+        v-else
+        :icon="item.icon || 'ChevronRightIcon'"
+      />
+      <span class="text-truncate text-capitalize">{{ t(item.title) }}</span>
       <b-badge
         v-if="item.tag"
         pill
@@ -27,7 +38,7 @@
 
 <script>
 import { useUtils as useAclUtils } from '@core/libs/acl'
-import { BLink, BBadge } from 'bootstrap-vue'
+import { BLink, BBadge, BAvatar } from 'bootstrap-vue'
 import { useUtils as useI18nUtils } from '@core/libs/i18n'
 import useVerticalNavMenuLink from './useVerticalNavMenuLink'
 import mixinVerticalNavMenuLink from './mixinVerticalNavMenuLink'
@@ -36,6 +47,7 @@ export default {
   components: {
     BLink,
     BBadge,
+    BAvatar,
   },
   mixins: [mixinVerticalNavMenuLink],
   props: {

src/@core/scss/base/core/menu/_navigation.scss

@@ -72,7 +72,7 @@
   .navbar-header {
     height: 100%;
     width: $menu-expanded-width;
-    height: $navbar-height;
+    height: fit-content; // $navbar-height;
     position: relative;
     padding: 0.35rem 1rem 0.3rem 1.64rem;
     transition: 300ms ease all, background 0s;

src/navigation/vertical/index.js

@@ -46,11 +46,7 @@ const modules = [
 ]
 
 function processMenu() {
-  const chainMenus = [
-    {
-      header: 'blockchains',
-    },
-  ]
+  const chainMenus = []
   Object.keys(store.state.chains.config).forEach(chain => {
     const menu = {
       title: chain,