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>
|