haditha_ui/components/haditha/NavigationMenu.vue

308 lines
7.3 KiB
Vue
Raw Normal View History

2025-02-16 12:51:52 +00:00
<script setup lang="ts">
const items = ref([
{
2025-02-17 13:03:06 +00:00
label: "حانه",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-home",
2025-03-06 11:28:20 +00:00
to: "/haditha",
2025-02-16 12:51:52 +00:00
descrption: "صفحه اصلی",
2025-02-17 13:03:06 +00:00
class: "flex flex-col lg:flex-row justify-center items-center hide-label",
2025-02-16 12:51:52 +00:00
},
{
label: "جستجو",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-search",
2025-03-06 11:28:20 +00:00
to: "/haditha/search",
2025-02-16 12:51:52 +00:00
slot: "search",
2025-02-17 13:03:06 +00:00
class: "flex flex-col lg:flex-row justify-center items-center",
2025-02-16 12:51:52 +00:00
},
{
label: "چت بات",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-chat-bot",
2025-03-06 11:28:20 +00:00
to: "/haditha/chat-bot",
2025-02-16 12:51:52 +00:00
slot: "chat-bot",
2025-02-17 13:03:06 +00:00
class: "flex flex-col lg:flex-row justify-center items-center",
2025-02-16 12:51:52 +00:00
},
{
label: "کتابخانه",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-library",
2025-03-06 11:28:20 +00:00
to: "/haditha/library",
2025-02-16 12:51:52 +00:00
slot: "library",
2025-02-17 13:03:06 +00:00
class: "flex flex-col lg:flex-row justify-center items-center",
},
{
label: "نشان شده ها",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-bookmark",
2025-03-06 11:28:20 +00:00
to: "/haditha/favorites",
2025-02-17 13:03:06 +00:00
class: "flex flex-col lg:hidden justify-center items-center",
},
{
label: "دیگر",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-menu",
2025-02-17 13:03:06 +00:00
class: "flex flex-col lg:hidden justify-center items-center hide-chevron",
children: [
{
label: "در باره ما",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-about-us",
2025-03-06 11:28:20 +00:00
to: "/haditha/about-us",
2025-02-17 13:03:06 +00:00
},
{
label: "تماس با ما",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-contact-us",
2025-03-06 11:28:20 +00:00
to: "/haditha/contact-us",
2025-02-17 13:03:06 +00:00
},
{
label: "قوانین و مقررات",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-copyright",
2025-03-06 11:28:20 +00:00
to: "/haditha/rules",
2025-02-17 13:03:06 +00:00
},
{
label: "خروج از حساب",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-logout",
2025-03-06 11:28:20 +00:00
to: "/haditha/logout",
2025-02-17 13:03:06 +00:00
},
],
2025-02-16 12:51:52 +00:00
},
]);
const leftItem = ref([
{
label: "نشان شده ها",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-bookmark",
2025-03-06 11:28:20 +00:00
to: "/haditha/favorites",
2025-02-16 12:51:52 +00:00
},
{
label: "Guide",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-menu",
2025-02-16 12:51:52 +00:00
children: [
{
label: "در باره ما",
2025-03-06 11:28:20 +00:00
icon: "i-haditha-about-us",
to: "/haditha/about-us",
2025-02-16 12:51:52 +00:00
},
{
label: "تماس با ما",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-contact-us",
2025-03-06 11:28:20 +00:00
to: "/haditha/contact-us",
2025-02-16 12:51:52 +00:00
},
{
label: "قوانین و مقررات",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-copyright",
2025-03-06 11:28:20 +00:00
to: "/haditha/rules",
2025-02-16 12:51:52 +00:00
},
{
label: "خروج از حساب",
2025-03-03 12:27:33 +00:00
icon: "i-haditha-logout",
2025-03-06 11:28:20 +00:00
to: "/haditha/logout",
2025-02-16 12:51:52 +00:00
},
],
},
]);
2025-02-17 13:03:06 +00:00
2025-02-18 12:56:13 +00:00
const isMobile = ref(false);
const rerenderNavigation = ref(1);
2025-02-17 13:03:06 +00:00
onMounted(() => {
2025-02-18 12:56:13 +00:00
if (window?.outerWidth < 576) {
isMobile.value = true;
console.info("is less than 576");
2025-03-06 11:28:20 +00:00
items.value = items.value.filter((item) => item.to != "/haditha/favorites");
2025-02-18 12:56:13 +00:00
rerenderNavigation.value++;
}
2025-02-17 13:03:06 +00:00
});
2025-02-16 12:51:52 +00:00
</script>
<template>
2025-02-18 12:56:13 +00:00
<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">
2025-02-22 13:07:20 +00:00
<!-- :disableHoverTrigge="isMobile" -->
2025-02-18 12:56:13 +00:00
<UNavigationMenu
:key="rerenderNavigation"
:items="items"
class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48"
2025-03-03 12:27:33 +00:00
:ui="{
root: 'root',
list: 'list',
label: 'label',
item: 'item',
link: 'link',
linkLeadingIcon: 'linkLeadingIcon size-8',
linkLeadingAvatar: 'linkLeadingAvatar',
linkLeadingAvatarSize: 'linkLeadingAvatarSize',
linkTrailing: 'linkTrailing',
linkTrailingBadge: 'linkTrailingBadge',
}"
2025-02-18 12:56:13 +00:00
/>
<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',
2025-03-03 12:27:33 +00:00
arrow: 'arrow',
group: 'group',
label: 'label',
separator: 'separator',
item: 'item',
itemLeadingIcon: 'size-4',
itemLeadingAvatar: 'itemLeadingAvatar',
itemLeadingAvatarSize: 'itemLeadingAvatarSize',
itemTrailing: 'itemTrailing',
2025-02-18 12:56:13 +00:00
}"
>
2025-03-03 12:27:33 +00:00
<UButton
icon="i-haditha-menu"
variant="ghost"
:ui="{
base: 'string[]',
label: 'label',
leadingIcon: 'leadingIcon size-8',
leadingAvatar: 'leadingAvatar',
leadingAvatarSize: 'leadingAvatarSize',
trailingIcon: 'trailingIcon',
}"
/>
2025-02-18 12:56:13 +00:00
</UDropdownMenu>
<ULink
v-else
raw
:to="item.to"
2025-02-26 07:52:21 +00:00
class="w-full flex justify-center items-center me-3"
active-class="text-(--color-white) bg-(--ui-primary) link-is-active"
2025-02-18 12:56:13 +00:00
>
2025-03-03 12:27:33 +00:00
<UIcon :name="item.icon" class="size-8" />
2025-02-18 12:56:13 +00:00
</ULink>
</template>
</div>
</UContainer>
2025-02-16 12:51:52 +00:00
</div>
</template>
<style lang="scss">
.fixed {
z-index: 999;
.my-navbar {
max-width: 1200px;
height: 68px;
border-radius: 16px;
border-width: 0.3px;
2025-02-17 13:03:06 +00:00
// justify-content: space-between;
2025-02-16 12:51:52 +00:00
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;
2025-02-17 13:03:06 +00:00
2025-02-26 07:52:21 +00:00
@media screen and (max-width: 991.99px) {
height: 76px;
}
2025-02-17 13:03:06 +00:00
nav > div {
width: 100%;
display: flex;
flex-direction: column;
ul {
li {
2025-02-18 12:56:13 +00:00
padding: 0;
2025-02-17 13:03:06 +00:00
@media screen and (max-width: 991.99px) {
flex: 1;
}
2025-02-18 12:56:13 +00:00
.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;
}
}
2025-03-03 12:27:33 +00:00
// max-width: 112px;
2025-02-18 12:56:13 +00:00
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;
}
}
2025-02-26 07:52:21 +00:00
@media screen and (max-width: 991.99px) {
height: 60px;
}
2025-02-18 12:56:13 +00:00
}
2025-02-17 13:03:06 +00:00
.hide-label {
.truncate {
display: none;
}
}
}
}
}
.hide-chevron {
span:last-child {
display: none;
}
}
2025-02-26 07:52:21 +00:00
.link-is-active {
width: 64;
height: 60;
gap: 4px;
border-radius: 12px;
2025-03-03 12:27:33 +00:00
padding-top: 14px;
padding-right: 16px;
padding-bottom: 14px;
padding-left: 16px;
2025-02-26 07:52:21 +00:00
background: linear-gradient(102.02deg, #4be8ae 7.38%, #00a762 91.78%);
box-shadow: 0px 4px 10px 0px #00745933;
// .icon {
// width: 24;
// height: 24;
// }
* {
color: #fff;
}
}
2025-02-16 12:51:52 +00:00
}
}
</style>