456 lines
11 KiB
Vue
456 lines
11 KiB
Vue
<script setup lang="ts">
|
||
import { useAuthStore } from "@stores/authStore";
|
||
|
||
// {
|
||
// label: "چت بات",
|
||
// icon: "haditha:chat-bot",
|
||
// to: "/haditha/chat-bot",
|
||
// slot: "chat-bot",
|
||
// class: "flex flex-col lg:flex-row justify-center items-center",
|
||
// },
|
||
|
||
const items = ref([
|
||
{
|
||
label: "خانه",
|
||
icon: "haditha:home",
|
||
to: "/haditha",
|
||
descrption: "صفحه اصلی",
|
||
class: "flex flex-col lg:flex-row justify-center items-center hide-label",
|
||
},
|
||
{
|
||
label: "جستجو",
|
||
icon: "haditha:search",
|
||
to: "/haditha/search",
|
||
slot: "search",
|
||
class: "flex flex-col lg:flex-row justify-center items-center",
|
||
},
|
||
|
||
{
|
||
label: "کتابخانه",
|
||
icon: "haditha:library",
|
||
to: "/haditha/library",
|
||
slot: "library",
|
||
class: "flex flex-col lg:flex-row justify-center items-center",
|
||
},
|
||
|
||
{
|
||
label: "نشان شده ها",
|
||
icon: "haditha:bookmark",
|
||
to: "/haditha/favorites",
|
||
class: "flex flex-col lg:hidden justify-center items-center",
|
||
},
|
||
|
||
{
|
||
label: "دیگر",
|
||
icon: "haditha:menu",
|
||
|
||
class:
|
||
"flex flex-col lg:hidden justify-center items-center hide-chevron other haditha:other",
|
||
children: [
|
||
{
|
||
label: "ورود / ثبت نام",
|
||
icon: "haditha:user-icon",
|
||
to: "/haditha/login",
|
||
},
|
||
{
|
||
label: "کتابخانه",
|
||
icon: "haditha:library",
|
||
to: "/haditha/library",
|
||
},
|
||
{
|
||
label: "در باره ما",
|
||
icon: "haditha:about-us",
|
||
to: "/haditha/about-us",
|
||
},
|
||
{
|
||
label: "تماس با ما",
|
||
icon: "haditha:contact-us",
|
||
to: "/haditha/contact-us",
|
||
},
|
||
{
|
||
label: "قوانین و مقررات",
|
||
icon: "haditha:copyright",
|
||
to: "/haditha/rules",
|
||
},
|
||
{
|
||
label: "خروج از حساب",
|
||
icon: "haditha:logout",
|
||
type: "button" as const,
|
||
onSelect(e: Event) {
|
||
e.preventDefault();
|
||
logout();
|
||
},
|
||
},
|
||
],
|
||
},
|
||
]);
|
||
|
||
const desktopLeftMenu = ref([
|
||
{
|
||
label: "نشان شده ها",
|
||
icon: "haditha:bookmark",
|
||
to: "/haditha/favorites",
|
||
},
|
||
|
||
{
|
||
label: "Guide",
|
||
icon: "haditha:menu",
|
||
children: [
|
||
{
|
||
label: "ورود / ثبت نام",
|
||
icon: "haditha:user-icon",
|
||
to: "/haditha/login",
|
||
},
|
||
|
||
{
|
||
label: "در باره ما",
|
||
icon: "haditha:about-us",
|
||
to: "/haditha/about-us",
|
||
},
|
||
{
|
||
label: "تماس با ما",
|
||
icon: "haditha:contact-us",
|
||
to: "/haditha/contact-us",
|
||
},
|
||
{
|
||
label: "قوانین و مقررات",
|
||
icon: "haditha:copyright",
|
||
to: "/haditha/rules",
|
||
},
|
||
{
|
||
label: "خروج از حساب",
|
||
icon: "haditha:logout",
|
||
type: "button" as const,
|
||
onSelect(e: Event) {
|
||
e.preventDefault();
|
||
logout();
|
||
},
|
||
},
|
||
],
|
||
},
|
||
]);
|
||
|
||
const isMobile = ref(false);
|
||
const rerenderNavigation = ref(1);
|
||
const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();
|
||
|
||
const filterLeftItem = () => {
|
||
if (isAuthenticatedGetter) {
|
||
let otherItemChildren = desktopLeftMenu.value[1].children.filter(
|
||
(i) => i.icon != "haditha:user-icon"
|
||
);
|
||
desktopLeftMenu.value[1].children = otherItemChildren;
|
||
} else {
|
||
let otherItemChildren = desktopLeftMenu.value[1].children.filter(
|
||
(i) => i.icon != "haditha:logout"
|
||
);
|
||
|
||
desktopLeftMenu.value[1].children = otherItemChildren;
|
||
rerenderNavigation.value++;
|
||
}
|
||
};
|
||
const filterRightItem = () => {
|
||
if (isAuthenticatedGetter) {
|
||
let otherItem = items.value.find((item) => {
|
||
return item.class.includes("haditha:other");
|
||
});
|
||
|
||
let otherItemChildren = otherItem.children.filter(
|
||
(i) => i.icon != "haditha:user-icon"
|
||
);
|
||
otherItem.children = otherItemChildren;
|
||
} else {
|
||
let otherItemIndex = items.value.findIndex((item) => {
|
||
return item.class.includes("haditha:other");
|
||
});
|
||
|
||
let otherItemChildren = items.value[otherItemIndex].children.filter(
|
||
(i) => i.icon != "haditha:logout"
|
||
);
|
||
|
||
items.value[otherItemIndex].children = otherItemChildren;
|
||
rerenderNavigation.value++;
|
||
}
|
||
};
|
||
|
||
const setMenu = () => {
|
||
filterRightItem();
|
||
filterLeftItem();
|
||
};
|
||
|
||
setMenu();
|
||
|
||
// if(!(isAuthenticatedGetter && isRealUserGetter))
|
||
// items.value = items.value.filter((item) => item.to != "/haditha/favorites");
|
||
|
||
onMounted(() => {
|
||
if (window?.outerWidth < 991) {
|
||
isMobile.value = true;
|
||
items.value = items.value.filter((item) => item.to != "/haditha/library");
|
||
rerenderNavigation.value++;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="fixed bottom-2 lg:bottom-auto lg:top-2 right-0 left-0">
|
||
<UContainer class="flex my-navbar mx-3 lg:mx-auto">
|
||
<!-- :disableHoverTrigge="isMobile" -->
|
||
<UNavigationMenu
|
||
:key="rerenderNavigation"
|
||
:items="items"
|
||
content-orientation="vertical"
|
||
:ui="{
|
||
root: 'root grow-1',
|
||
list: 'list md:justify-between lg:justify-start',
|
||
label: 'label',
|
||
item: 'item',
|
||
link: 'link',
|
||
linkLeadingIcon: 'linkLeadingIcon size-8',
|
||
linkLeadingAvatar: 'linkLeadingAvatar',
|
||
linkLeadingAvatarSize: 'linkLeadingAvatarSize',
|
||
linkTrailing: 'linkTrailing',
|
||
linkTrailingBadge: 'linkTrailingBadge',
|
||
}"
|
||
/>
|
||
<div class="hidden lg:flex items-center hamburger-menu">
|
||
<template v-for="(item, index) in desktopLeftMenu">
|
||
<UDropdownMenu
|
||
v-if="item.children?.length"
|
||
:items="item.children"
|
||
:ui="{
|
||
content: 'w-48',
|
||
arrow: 'arrow',
|
||
group: 'group',
|
||
label: 'label',
|
||
separator: 'separator',
|
||
item: 'item',
|
||
itemLeadingIcon: 'size-4',
|
||
itemLeadingAvatar: 'itemLeadingAvatar',
|
||
itemLeadingAvatarSize: 'itemLeadingAvatarSize',
|
||
itemTrailing: 'itemTrailing',
|
||
}"
|
||
:content="{
|
||
align: 'end',
|
||
side: 'bottom',
|
||
sideOffset: 15,
|
||
}"
|
||
>
|
||
<UButton
|
||
icon="haditha:menu"
|
||
variant="ghost"
|
||
:ui="{
|
||
base: 'string[]',
|
||
label: 'label',
|
||
leadingIcon: 'leadingIcon size-8',
|
||
leadingAvatar: 'leadingAvatar',
|
||
leadingAvatarSize: 'leadingAvatarSize',
|
||
trailingIcon: 'trailingIcon',
|
||
}"
|
||
/>
|
||
</UDropdownMenu>
|
||
|
||
<ULink
|
||
v-else
|
||
raw
|
||
:to="item.to"
|
||
class="w-full flex justify-center items-center me-3"
|
||
active-class="text-(--color-white) bg-(--ui-primary) link-is-active"
|
||
>
|
||
<UIcon :name="item.icon" class="size-8" />
|
||
</ULink>
|
||
</template>
|
||
</div>
|
||
</UContainer>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
.fixed {
|
||
z-index: 999;
|
||
.my-navbar {
|
||
max-width: 75em; //1200px
|
||
height: 4.25em; // 68px;
|
||
border-radius: 1em;
|
||
border-width: 0.3px;
|
||
// justify-content: space-between;
|
||
padding-top: 0.25em;
|
||
padding-right: 1em;
|
||
padding-bottom: 0.25em;
|
||
padding-left: 1em;
|
||
|
||
background-color: #fff;
|
||
border: 0.3px solid #e0e0e0;
|
||
box-shadow: 0px 4px 15px 0px #0000001a;
|
||
|
||
nav > div {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.isolate.min-w-0.flex.items-center.list {
|
||
li {
|
||
margin-left: 0.5em;
|
||
padding: 0;
|
||
|
||
.group {
|
||
&::before {
|
||
border-radius: 12px;
|
||
}
|
||
|
||
&:hover {
|
||
background: linear-gradient(
|
||
320.71deg,
|
||
#b9fde0 6.56%,
|
||
#e4f9f0 69.69%
|
||
);
|
||
// &::before {
|
||
// background-color: color-mix(in oklab, #00a762 50%, transparent);
|
||
// box-shadow: 0px 4px 10px 0px #00745933;
|
||
// border-radius: 0.75em; //12px;
|
||
// }
|
||
}
|
||
|
||
// max-width: 112px;
|
||
height: 3.5em;
|
||
gap: 4px;
|
||
border-radius: 0.75em;
|
||
padding-top: 0.37em; /*6px*/
|
||
padding-right: 1.2em;
|
||
padding-bottom: 0.37em; /*6px*/
|
||
padding-left: 1.2em;
|
||
|
||
font-family: var(--font);
|
||
font-weight: 400;
|
||
font-size: 0.87rem; /*14px*/
|
||
line-height: 1.3rem; /*6px*/
|
||
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;
|
||
}
|
||
}
|
||
|
||
.link-is-active {
|
||
width: 64;
|
||
height: 60;
|
||
gap: 4px;
|
||
border-radius: 12px;
|
||
|
||
padding-top: 0.875em; /*14px*/
|
||
padding-right: 1em; /*16px*/
|
||
padding-bottom: 0.875em; /*14px*/
|
||
padding-left: 1em; /*16px*/
|
||
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.group.item {
|
||
&:hover {
|
||
background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 991.99px) {
|
||
.fixed {
|
||
.my-navbar {
|
||
height: 4.8em; // 76px;
|
||
|
||
.absolute.top-full.left-0.flex.w-full {
|
||
width: 200px;
|
||
bottom: 100%;
|
||
top: auto;
|
||
|
||
.absolute.top-0.left-0.w-60 {
|
||
width: 200px;
|
||
}
|
||
}
|
||
|
||
nav > div {
|
||
ul.isolate.min-w-0.flex.items-center.list {
|
||
li {
|
||
flex: 1;
|
||
|
||
.group {
|
||
height: 6em;
|
||
|
||
font-size: 10px;
|
||
line-height: 150%;
|
||
}
|
||
.hide-label {
|
||
.truncate {
|
||
display: inline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
ul.grid.p-2.gap-1 {
|
||
li {
|
||
.group {
|
||
width: 186;
|
||
height: 45;
|
||
gap: 10px;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
|
||
font-family: var(--font);
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
line-height: 100%;
|
||
letter-spacing: 0%;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
|
||
&:hover {
|
||
background: linear-gradient(
|
||
320.71deg,
|
||
#b9fde0 6.56%,
|
||
#e4f9f0 69.69%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|