improve breadcrumb and header link

src/components/AppNav.vue

@@ -4,13 +4,13 @@ import { RouterLink } from 'vue-router'
 
 <template>
   <nav class="mx-auto max-w-screen-xl flex flex-wrap items-center justify-between">
-    <a href="https://codex.storage/" class="flex items-center rtl:space-x-reverse">
+    <RouterLink to="/" class="flex items-center relative rtl:space-x-reverse">
       <img src="../assets/logo.svg" class="h-8 hidden dark:inline" alt="Codex Logo" />
       <img src="../assets/logo-black.svg" class="h-8 inline dark:hidden" alt="Codex Logo" />
       <span class="self-center ml-3 text-2xl font-semibold whitespace-nowrap dark:text-white"
         >Codex</span
       >
-    </a>
+    </RouterLink>
     <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
       <button
         type="button"

src/components/NavBreadcrumb.vue

@@ -12,17 +12,31 @@ const routeName = computed(() => {
     return route.name
   }
 })
-const firstLinkMeta = computed(() =>
-  Object.keys(route.query).includes('enableModeration')
-    ? {
-        to: '/moderate',
-        name: 'Moderate'
-      }
-    : {
-        to: '/',
-        name: 'Requests'
-      }
-)
+const firstLinkMeta = computed(() => {
+  if (route.query.enableModeration === 'true' || route.path === '/moderate') {
+    return {
+      to: '/moderate',
+      name: 'Moderate'
+    }
+  } else {
+    return {
+      to: '/',
+      name: 'Requests'
+    }
+  }
+})
+const secondLinkMeta = computed(() => {
+  if (['/', '/moderate'].includes(route.path)) {
+    return {
+      visible: false
+    }
+  } else {
+    return {
+      visible: true,
+      name: routeName.value
+    }
+  }
+})
 </script>
 <template>
   <!-- Breadcrumb -->
@@ -50,7 +64,7 @@ const firstLinkMeta = computed(() =>
           {{ firstLinkMeta.name }}
         </RouterLink>
       </li>
-      <li v-if="route.path !== '/'" aria-current="page">
+      <li v-if="secondLinkMeta.visible" aria-current="page">
         <div class="flex items-center">
           <svg
             class="rtl:rotate-180 w-3 h-3 mx-1 text-gray-400"
@@ -67,9 +81,9 @@ const firstLinkMeta = computed(() =>
               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>
+          <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">
+            {{ secondLinkMeta.name }}</span
+          >
         </div>
       </li>
     </ol>

src/stores/requests.js

@@ -47,7 +47,6 @@ export const useRequestsStore = defineStore(
     const loading = ref(false)
     const fetched = ref(false) // indicates if past events were fetched
     const blocks = ref({})
-
     // const request = computed(() => count.value * 2)
 
     // onStorageRequested => add request to requests ref, along with slots