015/front/components/Navbar.vue

<template>
    <div class="flex flex-row bg-white/50 backdrop-blur-xl p-2 rounded-full gap-1 sticky top-0 z-10">
        <div
            v-for="item in routes"
            :key="item.key"
            :class="
                cx(
                    'flex flex-row items-center text-sm px-4 py-2 font-bold rounded-full relative select-none cursor-pointer',
                    !isActive(item) && 'hover:bg-black/5',
                    item?.name && 'gap-2',
                    item?.className
                )
            "
            @click="handleClick(item)"
        >
            <motion.div v-if="isActive(item)" layoutId="navbar-active" class="absolute inset-0 rounded-full w-full h-full bg-black/10" />
            <component :is="item.icon" />
            <div class="hidden sm:block">{{ item.name }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { cx } from 'class-variance-authority'
import { LucideClipboardType, LucidePaperclip } from '#components'
import { motion } from 'motion-v'
import { LucideGlobe } from 'lucide-vue-next'
import showDrawer from '@/lib/showDrawer'
import I18nSwitchDrawer from './Drawer/I18nSwitchDrawer.vue'
const { t } = useI18n()
const routes = computed(() => [
    {
        key: 'about',
        icon: () =>
            h('img', {
                class: 'size-10 rounded-full border-2 border-white/50',
                src: '/logo.png',
            }),
        onClick: () => {
            router.push('/about')
        },
        isActive: (item: { key: string }) => route.path?.endsWith(item.key),
        className: '!p-1.5',
    },
    { name: t('navbar.file'), key: 'file', icon: LucidePaperclip },
    { name: t('navbar.text'), key: 'text', icon: LucideClipboardType },
    {
        key: 'i18n',
        icon: LucideGlobe,
        onClick: () => {
            showDrawer({
                render: (props) => h(I18nSwitchDrawer, { ...props }),
            })
        },
        className: 'size-12 !p-1.5 justify-center items-center',
    },
])
const route = useRoute()
const router = useRouter()
const type = computed(() => route?.query?.type)

const isActive = (item: { key: string; isActive?: (item: { key: string }) => boolean }) => {
    const { key, isActive } = item || {}
    return isActive ? isActive(item) : type.value === key
}

const handleClick = (item: { key: string; onClick?: () => void }) => {
    const { key, onClick } = item || {}
    if (onClick) {
        onClick()
        return
    }
    router.push({
        path: '/',
        query: {
            ...route.query,
            type: key,
        },
    })
}
</script>