20 lines
1.2 KiB
Vue
20 lines
1.2 KiB
Vue
<script setup>
|
|
import {Link} from '@inertiajs/vue3'
|
|
import {ref} from "vue";
|
|
|
|
const componentRef = ref()
|
|
</script>
|
|
|
|
<template>
|
|
<Link ref="componentRef"
|
|
@mouseenter="componentRef.$el.setAttribute('data-hover', '')"
|
|
@mouseleave="componentRef.$el.removeAttribute('data-hover')"
|
|
class="flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5 *:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:fill-zinc-500 sm:*:data-[slot=icon]:size-5 *:last:data-[slot=icon]:ml-auto *:last:data-[slot=icon]:size-5 sm:*:last:data-[slot=icon]:size-4 *:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 sm:*:data-[slot=avatar]:size-6 data-hover:bg-zinc-950/5 data-hover:*:data-[slot=icon]:fill-zinc-950 data-active:bg-zinc-950/5 data-active:*:data-[slot=icon]:fill-zinc-950 data-current:*:data-[slot=icon]:fill-zinc-950 dark:text-white dark:*:data-[slot=icon]:fill-zinc-400 dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white dark:data-current:*:data-[slot=icon]:fill-white">
|
|
<slot />
|
|
</Link>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|