feat(theme-yun): add active class for categories/tags/archives nav

packages/valaxy-theme-yun/components/YunPostsInfo.vue

@@ -13,15 +13,24 @@ const tags = useTags()
 <template>
   <nav class="site-nav" text-xl mt-2>
     <YunPostClassifyNavItem
-      to="/archives/" icon="i-ri-archive-line" :title="t('menu.archives')"
+      to="/archives/"
+      icon="i-ri-archive-line"
+      active-icon="i-ri-archive-fill"
+      :title="t('menu.archives')"
       :total="site.postList.length"
     />
     <YunPostClassifyNavItem
-      to="/categories/" icon="i-ri-folder-2-line" :title="t('menu.categories')"
+      to="/categories/"
+      icon="i-ri-folder-2-line"
+      active-icon="i-ri-folder-2-fill"
+      :title="t('menu.categories')"
       :total="Array.from(categories.children).length"
     />
     <YunPostClassifyNavItem
-      to="/tags/" icon="i-ri-price-tag-3-line" :title="t('menu.tags')"
+      to="/tags/"
+      icon="i-ri-price-tag-3-line"
+      active-icon="i-ri-price-tag-3-fill"
+      :title="t('menu.tags')"
       :total="Array.from(tags).length"
     />
   </nav>

packages/valaxy-theme-yun/components/YunSidebarCard.vue

@@ -5,6 +5,7 @@
 <template>
   <YunCard class="p-4 min-h-sm" flex="~ col gap-1">
     <YunSiteInfo class="text-center" />
+    <YunGradientDivider class="my-2 op-20" />
     <YunPostsInfo />
     <YunGradientDivider class="my-2 op-20" />
     <YunSocialLinks />

packages/valaxy-theme-yun/components/menu/YunPostClassifyNavItem.vue

@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-defineProps<{
+import { computed } from 'vue'
+
+import { useRoute } from 'vue-router'
+
+const props = defineProps<{
+  activeIcon?: string
   icon: string
   title: string
   /**
@@ -8,23 +13,46 @@ defineProps<{
   total: number
   to: string
 }>()
+
+const route = useRoute()
+const active = computed(() => route.path === props.to)
+
+const icon = computed(() => {
+  if (active.value && props.activeIcon)
+    return props.activeIcon
+  return props.icon
+})
 </script>
 
 <template>
   <RouterLink
     flex="~ col center"
-    class="gap-1 w-20 p-2 rounded transition op-80"
-    :to="to" :title="title"
+    class="post-classify-nav-item gap-1 w-20 p-2 rounded transition op-80"
+    :to="to"
+    :title="title"
     hover="bg-$va-c-bg-soft op-100"
   >
     <div flex="~ col" class="text-$va-c-text inline-flex-center gap-1">
-      <div class="text-2xl" :class="icon" />
+      <div
+        class="text-2xl"
+        :class="icon"
+      />
       <span class="text-xs">
         {{ title }}
       </span>
     </div>
     <span
-      class="count text-base dark:text-white/80"
-    >{{ total }}</span>
+      class="count text-base text-black/80 dark:text-white/80"
+    >
+      {{ total }}
+    </span>
   </RouterLink>
 </template>
+
+<style lang="scss">
+.post-classify-nav-item {
+  &.router-link-active {
+    background-color: rgba(var(--va-c-primary-rgb), 0.08);
+  }
+}
+</style>