Arno Kaimbacher
cefd9081ae
Some checks failed
CI Pipeline / japa-tests (push) Failing after 52s
- adapted menu.ts, NavBar.vue, NavBarItem.vue for highlighting active nav item - NavBarItemLabel.vue for app menu highlighting - adapted routes.ts - adapted app.edge for new favicon - adapted LayoutAuthenticated.vue (:showAsideMenu="false") for showing AsideMenu optional - new material icons: BriefcaseCheck.vue, SwapHorizontal.vue, AccountGroup.vue, Lock.vue - started with FirstRunWizard
102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
|
import { computed } from 'vue';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
|
|
const props = defineProps({
|
|
icon: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
size: {
|
|
type: [String, Number],
|
|
default: 16,
|
|
},
|
|
isDesktopIconOnly: Boolean,
|
|
isHoverLabelOnly: Boolean,
|
|
routeName: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const active = computed(() => {
|
|
if (props.routeName && stardust.isCurrent(props.routeName)) {
|
|
return true;
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
});
|
|
|
|
const componentClass = computed(() => {
|
|
const base = [
|
|
// props.type,
|
|
'flex',
|
|
];
|
|
if (props.isHoverLabelOnly ) {
|
|
base.push(' flex-col items-center');
|
|
}
|
|
|
|
return base;
|
|
});
|
|
|
|
const labelClass = computed(() => {
|
|
const base = [
|
|
// props.type,
|
|
'transition',
|
|
];
|
|
|
|
if (props.isDesktopIconOnly && props.icon) {
|
|
base.push('lg:hidden');
|
|
}
|
|
|
|
if (props.isHoverLabelOnly && active.value == false) {
|
|
base.push('hidden');
|
|
} else if(props.isHoverLabelOnly && active.value == true) {
|
|
base.push('display-block');
|
|
}
|
|
|
|
|
|
|
|
return base;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="componentClass">
|
|
<slot />
|
|
<BaseIcon v-if="icon" :path="props.icon" class="transition-colors" :size="props.size" />
|
|
<!-- <span class="px-2 transition-colors" :class="{ 'lg:hidden': isDesktopIconOnly && props.icon }">{{ props.label }}</span> -->
|
|
<span class="px-2 transition-colors" :class="labelClass">{{ props.label }}</span>
|
|
</div>
|
|
</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;
|
|
border-bottom: 2px;
|
|
/* background-color: var(--color-primary-element-text); */
|
|
/* left: 50%; */
|
|
bottom: 6px;
|
|
display: block;
|
|
transition: all 0.1s ease-in-out;
|
|
opacity: 1;
|
|
}
|
|
</style> -->
|