add nav breadcrumbs

src/App.vue

@@ -7,6 +7,7 @@ import BlockNumber from '@/components/BlockNumber.vue'
 import AppNav from '@/components/AppNav.vue'
 import ContractEventAlerts from '@/components/ContractEventAlerts.vue'
 import { initDrawers, initDismisses } from 'flowbite'
+import NavBreadcrumb from './components/NavBreadcrumb.vue'
 
 const alerts = ref([])
 const id = ref(0)
@@ -173,6 +174,7 @@ onMounted(async () => {
     </header>
     <main class="flex-1 mx-auto max-w-screen-xl w-full p-4">
       <ContractEventAlerts v-model="alerts"></ContractEventAlerts>
+      <NavBreadcrumb></NavBreadcrumb>
       <RouterView />
     </main>
     <footer class="w-full text-center border-t p-4 mt-4 flex-none">

src/components/AppNav.vue

@@ -43,34 +43,6 @@ import { RouterLink } from 'vue-router'
         </svg>
       </button>
     </div>
-    <div
-      class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
-      id="navbar-sticky"
-    >
-      <ul
-        class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
-      >
-        <li>
-          <RouterLink
-            class="router-link block py-2 px-3 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
-            to="/"
-            >Requests</RouterLink
-          >
-        </li>
-        <li>
-          <RouterLink
-            class="router-link block py-2 px-3 rounded text-gray-900 hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-            to="/slots"
-            >Slots</RouterLink
-          >
-        </li>
-      </ul>
-    </div>
   </nav>
 </template>
 
-<style scoped>
-nav a.router-link-exact-active {
-  @apply text-white bg-blue-700 md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500;
-}
-</style>

src/components/NavBreadcrumb.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { shorten } from '@/utils/ids'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const parts = ref(getPathParts())
+
+function getPathParts() {
+  return route.path.split('/')
+}
+
+watch(
+  () => route.path,
+  (_) => {
+    parts.value = getPathParts()
+  }
+)
+
+const routeName = computed(() => {
+  if (route.name === 'Request details') {
+    return `Request ${shorten(route.params.requestId)}`
+  } else {
+    return route.name
+  }
+})
+</script>
+<template>
+  <!-- Breadcrumb -->
+  <nav
+    class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
+    aria-label="Breadcrumb"
+  >
+    <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+      <li class="inline-flex items-center">
+        <RouterLink
+          to="/"
+          class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white"
+        >
+          <svg
+            class="w-3 h-3 me-2.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+            />
+          </svg>
+          Requests
+        </RouterLink>
+      </li>
+      <li v-if="route.path !== '/'" aria-current="page">
+        <div class="flex items-center">
+          <svg
+            class="rtl:rotate-180 w-3 h-3 mx-1 text-gray-400"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 6 10"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m1 9 4-4-4-4"
+            />
+          </svg>
+          <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">{{
+            routeName
+          }}</span>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>

src/router/index.js

@@ -13,27 +13,19 @@ const router = createRouter({
       component: RequestsView
     },
     {
-      path: '/slots',
-      name: 'slots',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/SlotsView.vue')
-    },
-    {
-      path: '/request/:requestId',
-      name: 'request',
+      path: '/request/:requestId?',
+      name: 'Request details',
       component: RequestView,
       props: true // pass :requestId to props in RequestView
     },
     {
       path: '/404',
-      name: 'NotFound',
+      name: '404 not found',
       component: NotFoundView
     },
     {
       path: '/moderate',
-      name: 'Moderate',
+      name: 'Moderate images',
       component: ModerateView
     }
   ]