From 9b1aa29b76db0a1e1d7ba06a8759683244fdb286 Mon Sep 17 00:00:00 2001
From: keven1024 <99848979+keven1024@users.noreply.github.com>
Date: Tue, 13 May 2025 11:00:22 +0800
Subject: [PATCH] refactor(front): update Navbar component to use
 class-variance-authority for dynamic class binding

---
 front/components/Navbar.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/front/components/Navbar.vue b/front/components/Navbar.vue
index d200f90..f72349d 100644
--- a/front/components/Navbar.vue
+++ b/front/components/Navbar.vue
@@ -1,26 +1,26 @@
 <template>
     <div class="flex flex-row bg-white/50 backdrop-blur-xl p-2 rounded-full">
-        <div v-for="item in routes" :key="item.key" 
-        class="flex flex-row items-center gap-2 text-sm px-4 py-2 font-bold rounded-full relative select-none cursor-pointer"
-        @click="()=>{
+        <div v-for="item in routes" :key="item.key" :class="cx('flex flex-row items-center gap-2 text-sm px-4 py-2 font-bold rounded-full relative select-none cursor-pointer',
+            item?.key !== type && 'hover:bg-black/5'
+        )" @click="() => {
             router.push({
-                path:'/',
+                path: '/',
                 query: {
                     ...route.query,
                     type: item.key
                 }
             })
-        }"
-        >
-          <motion.div v-if="item?.key === type" layoutId="navbar-active" class="absolute inset-0 rounded-full w-full h-full bg-black/10"/>
-          <component :is="item.icon" />
-          {{ item.name }}
+        }">
+            <motion.div v-if="item?.key === type" layoutId="navbar-active"
+                class="absolute inset-0 rounded-full w-full h-full bg-black/10" />
+            <component :is="item.icon" />
+            {{ item.name }}
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-
+import { cx } from 'class-variance-authority'
 import { LucideClipboardType, LucidePaperclip } from "#components"
 import { motion } from "motion-v"
 const routes = [