clean up nav look

src/App.vue

@@ -174,7 +174,7 @@ onUnmounted(() => {
     </header>
     <main class="flex-1 mx-auto max-w-screen-xl w-full p-4">
       <ContractEventAlerts v-model="alerts"></ContractEventAlerts>
-      <NavBreadcrumb></NavBreadcrumb>
+      <NavBreadcrumb class="mb-4"></NavBreadcrumb>
       <RouterView />
     </main>
     <footer class="w-full text-center border-t p-4 mt-4 flex-none">

src/components/AppNav.vue

@@ -18,30 +18,6 @@ import { RouterLink } from 'vue-router'
       >
         Instructions
       </button>
-      <button
-        data-collapse-toggle="navbar-sticky"
-        type="button"
-        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-        aria-controls="navbar-sticky"
-        aria-expanded="false"
-      >
-        <span class="sr-only">Open main menu</span>
-        <svg
-          class="w-5 h-5"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 17 14"
-        >
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M1 1h15M1 7h15M1 13h15"
-          />
-        </svg>
-      </button>
     </div>
   </nav>
 </template>

src/components/NavBreadcrumb.vue

@@ -1,21 +1,9 @@
 <script setup>
 import { shorten } from '@/utils/ids'
-import { computed, ref, watch } from 'vue'
+import { computed } 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') {
@@ -24,6 +12,17 @@ const routeName = computed(() => {
     return route.name
   }
 })
+const firstLinkMeta = computed(() =>
+  Object.keys(route.query).includes('enableModeration')
+    ? {
+        to: '/moderate',
+        name: 'Moderate'
+      }
+    : {
+        to: '/',
+        name: 'Requests'
+      }
+)
 </script>
 <template>
   <!-- Breadcrumb -->
@@ -34,7 +33,7 @@ const routeName = computed(() => {
     <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="/"
+          :to="firstLinkMeta.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
@@ -48,7 +47,7 @@ const routeName = computed(() => {
               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
+          {{ firstLinkMeta.name }}
         </RouterLink>
       </li>
       <li v-if="route.path !== '/'" aria-current="page">

src/components/StorageRequest.vue

@@ -37,13 +37,16 @@ const stateColour = computed(() => getStateColour(request.value.state))
 <template>
   <div class="flex flex-wrap">
     <CodexImage
-      class="flex-initial mx-auto my-8 lg:my-16 min-w-sm max-w-md w-full rounded"
+      class="flex-initial mx-auto my-4 min-w-sm max-w-md w-full rounded"
       :cid="request.content.cid"
       :local-only="!['New', 'Fulfilled'].includes(request.state)"
       :moderated="enableModeration ? 'approved' : request.moderated"
     ></CodexImage>
-    <div class="py-8 px-4 ml-4 max-w-2xl lg:py-16 flex-1">
-      <div v-if="enableModeration === true" class="mb-4 p-5 w-full border border-gray-300 rounded-lg b-1 bg-gray-100">
+    <div class="py-4 px-4 ml-4 max-w-2xl flex-1">
+      <div
+        v-if="enableModeration === true"
+        class="mb-4 p-5 w-full border border-gray-300 rounded-lg b-1 bg-gray-100"
+      >
         <label for="moderation" class="block mb-2 text-lg font-medium text-gray-900 dark:text-white"
           >Moderation station</label
         >