forked from geolba/tethys.backend
91 lines
2.1 KiB
Vue
91 lines
2.1 KiB
Vue
<script setup>
|
|
import { StyleService } from '@/Stores/style';
|
|
// 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>
|