GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-05-26 07:08:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(front): update Navbar component to use class-variance-authority for dynamic class binding

Browse Source
This commit is contained in:
keven1024
2025-05-13 11:00:22 +08:00
parent fe4a00aa09
commit 9b1aa29b76
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
front/components/Navbar.vue
View File

@@ -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 = [