48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<RouterLink :to="to" class="block px-4 py-2 hover:bg-gray-700 border-l-4 border-transparent" role="menuitem">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<component :is="icon" class="w-5 h-5 mr-3" aria-hidden="true" />
|
|
<span>{{ text }}</span>
|
|
</div>
|
|
<span
|
|
v-if="badge"
|
|
class="bg-green-500 text-white text-xs px-2 py-1 rounded-full"
|
|
aria-label="Nouveaux éléments: {{ badge }}">
|
|
{{ badge }}
|
|
</span>
|
|
</div>
|
|
</RouterLink>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
icon: {
|
|
type: Function,
|
|
required: true
|
|
},
|
|
text: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
to: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
isActive: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
badge: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.router-link-active {
|
|
@apply text-green-600 bg-gray-800 border-green-600;
|
|
}
|
|
</style>
|