feat: improve explore loading

components/common/CommonRouteTabs.vue

@@ -5,6 +5,7 @@ const { options, command, replace, preventScrollTop = false } = $defineProps<{
   options: {
     to: RouteLocationRaw
     display: string
+    disabled?: boolean
     name?: string
     icon?: string
   }[]
@@ -28,18 +29,25 @@ useCommands(() => command
 
 <template>
   <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide>
-    <NuxtLink
+    <template
       v-for="(option, index) in options"
       :key="option?.name || index"
-      :to="option.to"
-      :replace="replace"
-      relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
-      tabindex="1"
-      hover:bg-active transition-100
-      exact-active-class="children:(font-bold !border-primary !op100)"
-      @click="!preventScrollTop && $scrollToTop()"
     >
-      <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center border-b-3 op50 hover:op70 border-transparent>{{ option.display }}</span>
-    </NuxtLink>
+      <NuxtLink
+        v-if="!option.disabled"
+        :to="option.to"
+        :replace="replace"
+        relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
+        tabindex="1"
+        hover:bg-active transition-100
+        exact-active-class="children:(text-secondary !border-primary !op100)"
+        @click="!preventScrollTop && $scrollToTop()"
+      >
+        <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span>
+      </NuxtLink>
+      <div v-else flex flex-auto sm:px6 px2>
+        <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
+      </div>
+    </template>
   </div>
 </template>