first commit
This commit is contained in:
19
resources/js/Components/Sidebar/SidebarItem.vue
Normal file
19
resources/js/Components/Sidebar/SidebarItem.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user