From d4d058b9cd7ab1a4412acfb5f86a9062b6c02027 Mon Sep 17 00:00:00 2001
From: Andre Miras <andre.miras@gmail.com>
Date: Wed, 30 Nov 2022 20:14:34 +0100
Subject: [PATCH] Breadcrumb navigation links

Make it possible to use `route.params` inside the breadcrumb.
Use it to link to `/:chain/staking` and `/:chain/blocks`.
---
 src/@core/layouts/components/AppBreadcrumb.vue | 10 +++++++++-
 src/router/index.js                            | 12 ++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/@core/layouts/components/AppBreadcrumb.vue b/src/@core/layouts/components/AppBreadcrumb.vue
index 929fd432..7f602bf4 100644
--- a/src/@core/layouts/components/AppBreadcrumb.vue
+++ b/src/@core/layouts/components/AppBreadcrumb.vue
@@ -31,7 +31,7 @@
                 {{ chainname }}
               </b-breadcrumb-item>
               <b-breadcrumb-item
-                v-for="item in $route.meta.breadcrumb"
+                v-for="item in breadcrumb"
                 :key="item.text"
                 :active="item.active"
                 :to="item.to"
@@ -75,6 +75,14 @@ export default {
     chainname() {
       return this.$store?.state?.chains?.selected?.chain_name
     },
+    /**
+     * Invoke `route.meta.breadcrumb($route)` if breadcrumb is callable.
+     */
+    breadcrumb() {
+      const { breadcrumb } = this.$route.meta
+      const breadcrumbIsCallable = typeof breadcrumb === 'function'
+      return breadcrumbIsCallable ? breadcrumb(this.$route) : breadcrumb
+    },
   },
 }
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index 3084d4b9..83f4f029 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -249,16 +249,16 @@ const router = new VueRouter({
       component: () => import('@/views/StakingValidator.vue'),
       meta: {
         pageTitle: 'Staking Validator',
-        breadcrumb: [
+        breadcrumb: route => ([
           {
             text: 'Staking',
-            active: true,
+            to: `/${route.params.chain}/staking`,
           },
           {
             text: 'Validator',
             active: true,
           },
-        ],
+        ]),
       },
     },
     {
@@ -317,16 +317,16 @@ const router = new VueRouter({
       component: () => import('@/views/Block.vue'),
       meta: {
         pageTitle: 'Block',
-        breadcrumb: [
+        breadcrumb: route => ([
           {
             text: 'Blocks',
-            active: true,
+            to: `/${route.params.chain}/blocks`,
           },
           {
             text: 'Block',
             active: true,
           },
-        ],
+        ]),
       },
     },
     {