Arno Kaimbacher
296c8fd46e
Some checks failed
CI Pipeline / japa-tests (push) Failing after 1m13s
- renamed middleware Role and Can to role_middleware and can_middleware - added some typing for inertia vue3 components - npm updates
143 lines
3.6 KiB
Vue
143 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
|
import { StyleService } from '@/Stores/style.service';
|
|
// 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,
|
|
underline: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
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 active = computed(() => {
|
|
// if (props.routeName && stardust.isCurrent(props.routeName)) {
|
|
// return true;
|
|
// }
|
|
// else {
|
|
// return false;
|
|
// }
|
|
// });
|
|
|
|
const activeClass = computed(() => {
|
|
if (props.routeName && stardust.isCurrent(props.routeName)) {
|
|
// console.log(props.item.route);
|
|
const activeCls = [
|
|
styleStore.navBarItemLabelActiveColorStyle,
|
|
'dark:text-slate-400'
|
|
];
|
|
|
|
if (props.underline) {
|
|
activeCls.push('app-menu-entry__active');
|
|
}
|
|
|
|
// return `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400 app-menu-entry__active`;
|
|
return activeCls;
|
|
} else {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
// 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,
|
|
`${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`,
|
|
// 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>
|
|
|
|
<style lang="css" scoped>
|
|
.app-menu-entry__active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.app-menu-entry__active::before {
|
|
content: "___";
|
|
position: absolute;
|
|
pointer-events: none;
|
|
/* border-bottom-color: var(--color-main-background); */
|
|
/* transform: translateX(-50%); */
|
|
width: 100%;
|
|
/* height: 5px; */
|
|
border-radius: 3px;
|
|
background-color: var(--color-primary-element-text);
|
|
/* left: 50%; */
|
|
bottom: 6px;
|
|
display: block;
|
|
transition: all 0.1s ease-in-out;
|
|
opacity: 1;
|
|
}
|
|
</style> |