Files
solidtime/resources/js/Components/ResponsiveNavLink.vue
Gregor Vostrak e78a551098 refactor to shadcn components, dynamically load extension frontend
add jetstream permissions, add dynamic inertia module loading, add shadcn components, change modals and dropdowns to shadcn dismissable layer,
2025-04-23 14:33:32 +02:00

32 lines
1.1 KiB
Vue

<script setup lang="ts">
import { computed } from 'vue';
import { Link } from '@inertiajs/vue3';
const props = defineProps<{
active?: boolean;
href?: string;
as?: string;
}>();
const classes = computed(() => {
return props.active
? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 text-start text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
: 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-text-secondary hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out';
});
</script>
<template>
<div>
<button
v-if="as == 'button'"
:class="classes"
class="w-full text-start">
<slot />
</button>
<Link v-else :href="href ?? ''" :class="classes">
<slot />
</Link>
</div>
</template>