fix nav issue

src/layouts/components/DefaultLayout.vue

@@ -13,7 +13,7 @@ import { useBlockchain } from '@/stores';
 
 import NavBarI18n from './NavBarI18n.vue';
 import NavBarWallet from './NavBarWallet.vue';
-import type { NavGroup, NavLink, NavSectionTitle } from '../types';
+import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '../types';
 
 const dashboard = useDashboard();
 dashboard.initial();
@@ -37,15 +37,19 @@ const changeOpen = (index: Number) => {
 };
 const showDiscord = window.location.host.search('ping.pub') > -1;
 
-function isNavGroup(nav: NavGroup | NavLink | NavSectionTitle | any): nav is NavGroup {
+function isNavGroup(nav: VerticalNavItems | any): nav is NavGroup {
    return (<NavGroup>nav).children !== undefined;
 }
-function isNavLink(nav: NavGroup | NavLink | NavSectionTitle | any): nav is NavLink {
+function isNavLink(nav: VerticalNavItems | any): nav is NavLink {
    return (<NavLink>nav).to !== undefined;
 }
-function isNavTitle(nav: NavGroup | NavLink | NavSectionTitle | any): nav is NavSectionTitle {
+function isNavTitle(nav: VerticalNavItems | any): nav is NavSectionTitle {
    return (<NavSectionTitle>nav).heading !== undefined;
 }
+function selected(route: any, nav: NavLink) {
+  const b = route.path === nav.to?.path || route.path.startsWith(nav.to?.path) && nav.title.indexOf('dashboard') === -1
+  return b
+}
 </script>
 
 <template>
@@ -118,17 +122,15 @@ function isNavTitle(nav: NavGroup | NavLink | NavSectionTitle | any): nav is Nav
             </div>
           </div>
           <div class="collapse-content">
-            <div class="menu bg-base-100 w-full">
+            <div v-for="(el, key) of item?.children" class="menu bg-base-100 w-full">
               <RouterLink
-                v-for="(el, key) of item?.children"
+                v-if="isNavLink(el)"
                 @click="sidebarShow = false"
-                :key="key"
                 class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
-                :to="el?.to"
                 :class="{
-                  '!bg-primary':
-                    $route.path === el?.to?.path && item?.title !== 'Favorite',
+                  '!bg-primary': selected($route, el),
                 }"
+                :to="el.to"
               >
                 <Icon
                   v-if="!el?.icon?.image"
@@ -148,9 +150,7 @@ function isNavTitle(nav: NavGroup | NavLink | NavSectionTitle | any): nav is Nav
                 <div
                   class="text-base capitalize text-gray-500 dark:text-gray-300"
                   :class="{
-                    'text-white':
-                      $route.path === el?.to?.path &&
-                      item?.title !== 'Favorite',
+                    'text-white': item?.title !== 'Favorite',
                   }"
                 >
                   {{ item?.title === 'Favorite' ? el?.title : $t(el?.title) }}
@@ -161,8 +161,8 @@ function isNavTitle(nav: NavGroup | NavLink | NavSectionTitle | any): nav is Nav
         </div>
 
         <RouterLink
+          v-if="isNavLink(item)"
           :to="item?.to"
-          v-if="isNavGroup(item)"
           @click="sidebarShow = false"
           class="cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
         >

src/layouts/types.d.ts

@@ -37,21 +37,22 @@ export interface Icon {
 export interface NavLink extends NavLinkProps {
     title: string
     icon?: Icon
-    badgeContent?: string
+    badgeContent?: string | number
     badgeClass?: string
     disable?: boolean
     order?: number
 }
 
 // 👉 Vertical nav group
-export interface NavGroup extends NavLinkProps {
+export interface NavGroup {
     title: string
     icon?: Icon
-    badgeContent?: string
+    badgeContent?: string | number
     badgeClass?: string
     children: (NavLink | NavGroup)[]
     disable?: boolean
     order?: number
+    i18n?: boolean
 }
 
 export declare type VerticalNavItems = (NavLink | NavGroup | NavSectionTitle)[]

src/stores/useBlockchain.ts

@@ -5,7 +5,7 @@ import {
   type Endpoint,
   EndpointType,
 } from './useDashboard';
-import type { VerticalNavItems } from '@/layouts/types';
+import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '@/layouts/types';
 import { useRouter } from 'vue-router';
 import { CosmosRestClient } from '@/libs/client';
 import {
@@ -103,7 +103,7 @@ export const useBlockchain = defineStore('blockchain', {
       // combine all together
       return [
         ...currNavItem,
-        { heading: 'Ecosystem' },
+        { heading: 'Ecosystem' } as NavSectionTitle,
         {
           title: 'Favorite',
           children: favNavItems,
@@ -111,7 +111,7 @@ export const useBlockchain = defineStore('blockchain', {
           badgeClass: 'bg-primary',
           i18n: true,
           icon: { icon: 'mdi-star', size: '22' },
-        },
+        } as NavGroup,
         {
           title: 'All Blockchains',
           to: { path: '/' },
@@ -119,7 +119,7 @@ export const useBlockchain = defineStore('blockchain', {
           badgeClass: 'bg-primary',
           i18n: true,
           icon: { icon: 'mdi-grid', size: '22' },
-        },
+        } as NavLink,
       ];
     },
   },