haditha_ui/components/hadith/NavigationMenu.vue
2025-02-22 16:37:20 +03:30

243 lines
5.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script setup lang="ts">
const items = ref([
{
label: "حانه",
icon: "i-lucide-home",
to: "/hadith",
descrption: "صفحه اصلی",
class: "flex flex-col lg:flex-row justify-center items-center hide-label",
},
{
label: "جستجو",
icon: "i-lucide-search",
to: "/hadith/search",
slot: "search",
class: "flex flex-col lg:flex-row justify-center items-center",
},
{
label: "چت بات",
icon: "i-lucide-message-square-text",
to: "/hadith/chat-bot",
slot: "chat-bot",
class: "flex flex-col lg:flex-row justify-center items-center",
},
{
label: "کتابخانه",
icon: "i-lucide-book-open-text",
to: "/hadith/library",
slot: "library",
class: "flex flex-col lg:flex-row justify-center items-center",
},
{
label: "نشان شده ها",
icon: "i-lucide-bookmark",
to: "/hadith/favorites",
class: "flex flex-col lg:hidden justify-center items-center",
},
{
label: "دیگر",
icon: "i-lucide-menu",
class: "flex flex-col lg:hidden justify-center items-center hide-chevron",
children: [
{
label: "در باره ما",
icon: "i-lucide-house",
to: "/hadith/about-us",
},
{
label: "تماس با ما",
icon: "i-lucide-cloud-download",
to: "/hadith/contact-us",
},
{
label: "قوانین و مقررات",
icon: "i-lucide-smile",
to: "/hadith/rules",
},
{
label: "خروج از حساب",
icon: "i-lucide-smile",
to: "/hadith/logout",
},
],
},
]);
const leftItem = ref([
{
label: "نشان شده ها",
icon: "i-lucide-bookmark",
to: "/hadith/favorites",
},
{
label: "Guide",
icon: "i-lucide-menu",
children: [
{
label: "در باره ما",
icon: "i-lucide-house",
to: "/hadith/about-us",
},
{
label: "تماس با ما",
icon: "i-lucide-cloud-download",
to: "/hadith/contact-us",
},
{
label: "قوانین و مقررات",
icon: "i-lucide-smile",
to: "/hadith/rules",
},
{
label: "خروج از حساب",
icon: "i-lucide-smile",
to: "/hadith/logout",
},
],
},
]);
const isMobile = ref(false);
const rerenderNavigation = ref(1);
onMounted(() => {
if (window?.outerWidth < 576) {
isMobile.value = true;
console.info("is less than 576");
items.value = items.value.filter((item) => item.to != "/hadith/favorites");
rerenderNavigation.value++;
}
});
</script>
<template>
<div class="fixed bottom-2 lg:bottom-auto lg:top-2 right-0 left-0">
<UContainer class="flex justify-center my-navbar mx-3 lg:mx-auto">
<!-- :disableHoverTrigge="isMobile" -->
<UNavigationMenu
:key="rerenderNavigation"
:items="items"
class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48"
/>
<div class="hidden lg:flex items-center">
<template v-for="(item, index) in leftItem">
<UDropdownMenu
v-if="item.children?.length"
:items="item.children"
:ui="{
content: 'w-48',
}"
>
<UButton icon="i-lucide-menu" color="neutral" variant="outline" />
</UDropdownMenu>
<ULink
v-else
raw
:to="item.to"
class="w-full h-full flex justify-center items-center"
>
<UIcon :name="item.icon" class="size-7" />
</ULink>
</template>
</div>
</UContainer>
</div>
</template>
<style lang="scss">
.fixed {
z-index: 999;
.my-navbar {
max-width: 1200px;
height: 68px;
border-radius: 16px;
border-width: 0.3px;
// justify-content: space-between;
padding-top: 4px;
padding-right: 16px;
padding-bottom: 4px;
padding-left: 16px;
background-color: #fff;
border: 0.3px solid #e0e0e0;
box-shadow: 0px 4px 15px 0px #0000001a;
nav > div {
width: 100%;
display: flex;
flex-direction: column;
ul {
li {
padding: 0;
@media screen and (max-width: 991.99px) {
flex: 1;
}
.group {
&::before {
border-radius: 12px;
}
&:hover {
&::before {
background-color: color-mix(in oklab, #00a762 50%, transparent);
box-shadow: 0px 4px 10px 0px #00745933;
border-radius: 12px;
}
}
max-width: 112px;
height: 48px;
gap: 4px;
border-radius: 12px;
padding-top: 6px;
padding-right: 16px;
padding-bottom: 6px;
padding-left: 16px;
font-family: IRANSansX;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0%;
text-align: center;
&[data-active=""] {
background: linear-gradient(
102.02deg,
#4be8ae 7.38%,
#00a762 91.78%
);
box-shadow: 0px 4px 10px 0px #00745933;
* {
color: #fff;
}
}
}
.hide-label {
.truncate {
display: none;
}
}
}
}
}
.hide-chevron {
span:last-child {
display: none;
}
}
}
}
</style>