forked from geolba/tethys.backend
91 lines
1.9 KiB
Vue
91 lines
1.9 KiB
Vue
|
<script setup>
|
||
|
|
import { StyleService } from '@/Stores/style.js'
|
||
|
|
// import { Link } from '@inertiajs/vue3'
|
||
|
|
import { Link } from '@inertiajs/vue3'
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
href: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
routeName: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
param:{
|
||
|
|
type:Number
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'flex'
|
||
|
|
},
|
||
|
|
activeColor: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
isDesktopIconOnly: Boolean,
|
||
|
|
dropdown: Boolean,
|
||
|
|
active: Boolean
|
||
|
|
})
|
||
|
|
|
||
|
|
const is = computed(() => {
|
||
|
|
if (props.href) {
|
||
|
|
return 'a'
|
||
|
|
}
|
||
|
|
|
||
|
|
if (props.routeName) {
|
||
|
|
return Link
|
||
|
|
}
|
||
|
|
|
||
|
|
return 'div'
|
||
|
|
})
|
||
|
|
|
||
|
|
const styleStore = StyleService()
|
||
|
|
|
||
|
|
const activeColor = props.activeColor ?? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`
|
||
|
|
|
||
|
|
const activeClass = computed(
|
||
|
|
// () => props.routeName && route().current(props.routeName) == true ? props.activeColor : null
|
||
|
|
() => props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null
|
||
|
|
)
|
||
|
|
// const itemRoute = computed(() => (props.routeName ? stardust.route(props.routeName): ''));
|
||
|
|
|
||
|
|
const componentClass = computed(() => {
|
||
|
|
const base = [
|
||
|
|
props.type,
|
||
|
|
props.active
|
||
|
|
? activeColor
|
||
|
|
: `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`
|
||
|
|
]
|
||
|
|
|
||
|
|
if (props.type === 'block') {
|
||
|
|
base.push('lg:flex')
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!props.dropdown) {
|
||
|
|
base.push('py-2', 'px-3')
|
||
|
|
} else {
|
||
|
|
base.push('p-0', 'lg:py-2', 'lg:px-3')
|
||
|
|
}
|
||
|
|
|
||
|
|
if (props.isDesktopIconOnly) {
|
||
|
|
base.push('lg:w-16', 'lg:justify-center')
|
||
|
|
}
|
||
|
|
|
||
|
|
return base
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<component
|
||
|
|
:is="is"
|
||
|
|
class="items-center grow-0 shrink-0 relative cursor-pointer"
|
||
|
|
:class="[componentClass, activeClass]"
|
||
|
|
:href="routeName ? stardust.route(props.routeName, [props.param]) : href"
|
||
|
|
>
|
||
|
|
<slot />
|
||
|
|
</component>
|
||
|
|
</template>
|