marzban-dev
139 lines
3.9 KiB
Vue
139 lines
3.9 KiB
Vue
<script lang="ts" setup>
|
|
// types
|
|
|
|
type Props = {
|
|
isOpen: boolean;
|
|
items: {
|
|
title: string;
|
|
subitems: {
|
|
title: string;
|
|
link: string;
|
|
}[];
|
|
}[];
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
const { items, isOpen } = toRefs(props);
|
|
|
|
// emits
|
|
|
|
const emit = defineEmits(["update:isOpen"]);
|
|
|
|
// states
|
|
|
|
const selectedItem = ref(0);
|
|
const selectTabTimer = ref<NodeJS.Timeout | null>(null);
|
|
|
|
const isScrollLocked = useScrollLock(window);
|
|
|
|
const navbarEl = ref<HTMLElement | null>(null);
|
|
const { height: navbarHeight } = useElementSize(navbarEl);
|
|
|
|
// computed
|
|
|
|
const selectedItemSubItems = computed(() => {
|
|
if (items.value.length > 0) {
|
|
return items.value[selectedItem.value].subitems;
|
|
}
|
|
|
|
return [];
|
|
});
|
|
|
|
// methods
|
|
|
|
const menuTabMouseEnter = (index: number) => {
|
|
if (selectTabTimer.value) clearTimeout(selectTabTimer.value);
|
|
selectTabTimer.value = setTimeout(() => {
|
|
selectedItem.value = index;
|
|
}, 150);
|
|
};
|
|
|
|
const menuTabMouseLeave = () => {
|
|
if (selectTabTimer.value) clearTimeout(selectTabTimer.value);
|
|
selectTabTimer.value = null;
|
|
};
|
|
|
|
// watches
|
|
|
|
watch(
|
|
isOpen,
|
|
(newValue) => {
|
|
isScrollLocked.value = newValue;
|
|
|
|
if (!newValue) {
|
|
selectedItem.value = 0;
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
|
|
// lifecycle
|
|
|
|
onMounted(() => {
|
|
navbarEl.value = document.querySelector("#header-navbar");
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Transition
|
|
name="fade"
|
|
mode="out-in"
|
|
>
|
|
<div
|
|
v-if="isOpen"
|
|
:style="{ marginTop: `${navbarHeight}px` }"
|
|
class="fixed right-0 top-0 w-full z-999 bg-black/50 h-svh border-t border-slate-200"
|
|
>
|
|
<div
|
|
class="flex h-200 bg-white"
|
|
@mouseleave="$emit('update:isOpen', false)"
|
|
>
|
|
<div class="bg-slate-100 p-4 flex flex-col overflow-y-auto mask-b-from-90% pb-8">
|
|
<button
|
|
v-for="(item, index) in items"
|
|
:key="item.title"
|
|
class="text-black transition-all p-4 rounded-xl cursor-default"
|
|
:class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
|
|
:id="`mega-menu-tab-${index}`"
|
|
@mouseenter="menuTabMouseEnter(index)"
|
|
@click="selectedItem = index"
|
|
@mouseleave="menuTabMouseLeave"
|
|
>
|
|
{{ item.title }}
|
|
</button>
|
|
</div>
|
|
<div class="overflow-y-auto w-full mask-b-from-90% pb-8">
|
|
<Transition
|
|
name="fade"
|
|
mode="out-in"
|
|
:duration="150"
|
|
>
|
|
<div
|
|
:key="selectedItem"
|
|
class="grid grid-cols-4 p-4 text-back w-full h-fit"
|
|
:style="{
|
|
// gridTemplateRows: 'repeat(5, auto)',
|
|
// justifyContent: 'center',
|
|
}"
|
|
>
|
|
<NuxtLink
|
|
v-for="item in selectedItemSubItems"
|
|
:to="'https://google.com'"
|
|
class="p-4 whitespace-nowrap h-fit text-slate-500 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all"
|
|
>
|
|
<span class="truncate w-[90%]">
|
|
{{ item.title }}
|
|
</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|