015/front/components/Navbar.vue

<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="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: '/',
                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 }}
        </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 = [
    { name: '文件', key: 'file', icon: LucidePaperclip },
    { name: '文本', key: 'text', icon: LucideClipboardType }
]
const route = useRoute()
const router = useRouter()
const type = computed(() => route?.query?.type)
</script>