From f164a341e251ec7b2ef78a286fe72a54a80bd7fc Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Thu, 20 Jun 2024 10:48:22 +1000
Subject: [PATCH] improve breadcrumb and header link

---
 src/components/AppNav.vue        |  4 +--
 src/components/NavBreadcrumb.vue | 44 +++++++++++++++++++++-----------
 src/stores/requests.js           |  1 -
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index beb19cf..2f3db7e 100644
--- a/src/components/AppNav.vue
+++ b/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"
diff --git a/src/components/NavBreadcrumb.vue b/src/components/NavBreadcrumb.vue
index 26be290..5065c9d 100644
--- a/src/components/NavBreadcrumb.vue
+++ b/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>
diff --git a/src/stores/requests.js b/src/stores/requests.js
index a0aee6c..4e94676 100644
--- a/src/stores/requests.js
+++ b/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