marzban-dev
190 lines
7.3 KiB
Vue
190 lines
7.3 KiB
Vue
<script setup lang="ts">
|
|
// import
|
|
|
|
import useGetAccount from "~/composables/api/account/useGetAccount";
|
|
import { useAuth } from "~/composables/api/auth/useAuth";
|
|
import useGetCategories from "~/composables/api/categories/useGetCategories";
|
|
import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
|
|
import { NAV_LINKS } from "~/constants";
|
|
|
|
// state
|
|
|
|
const route = useRoute();
|
|
const { token } = useAuth();
|
|
const isSideDrawerOpen = ref(false);
|
|
const isCategoriesMenuOpen = ref(false);
|
|
|
|
// queries
|
|
|
|
const { data: account } = useGetAccount();
|
|
const { data: cart } = useGetCartOrders();
|
|
const { data: categories } = useGetCategories();
|
|
|
|
// computed
|
|
|
|
const isHomePage = computed(() => route.path === "/");
|
|
|
|
const megaMenuCategories = computed(() => {
|
|
if (categories.value) {
|
|
return categories.value.map((item) => {
|
|
return {
|
|
title: item.name,
|
|
subitems: item.subcategorys.map((item) => {
|
|
return {
|
|
title: item.name,
|
|
subitems: item.subcategorys.map((item) => {
|
|
return {
|
|
title: item.name,
|
|
link: item.slug,
|
|
};
|
|
}),
|
|
};
|
|
}),
|
|
};
|
|
});
|
|
}
|
|
|
|
return [];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
id="header-navbar"
|
|
class="w-full flex-center"
|
|
:class="isHomePage ? 'fixed top-0 left-0 z-999' : 'z-999'"
|
|
>
|
|
<div class="size-full flex items-center justify-between container h-[65px] lg:h-[85px] shrink-0 grow-0">
|
|
<button
|
|
class="md:hidden header-navbar-item"
|
|
@click="isSideDrawerOpen = true"
|
|
>
|
|
<Icon
|
|
name="ci:humbleicons-bars"
|
|
size="28"
|
|
/>
|
|
</button>
|
|
<div class="max-md:hidden flex items-center gap-8 lg:gap-16">
|
|
<div class="flex items-center justify-end gap-4 lg:gap-[1.5rem]">
|
|
<Tooltip
|
|
v-if="!!account && !!token"
|
|
title="حساب کاربری"
|
|
>
|
|
<NuxtLink
|
|
:to="{ name: 'profile' }"
|
|
class="flex items-center justify-center"
|
|
>
|
|
<Avatar
|
|
class="!size-7"
|
|
iconClass="header-navbar-item"
|
|
:src="account.profile_photo"
|
|
:alt="
|
|
account.first_name && account.last_name
|
|
? `${account.first_name.charAt(0)} ${account.last_name.charAt(0)}`
|
|
: 'بدون نام کاربری'
|
|
"
|
|
/>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
<Tooltip
|
|
v-else
|
|
title="ورود"
|
|
>
|
|
<NuxtLink
|
|
to="/signin"
|
|
class="flex-center header-navbar-item"
|
|
>
|
|
<!-- <Icon
|
|
name="ci:profile"
|
|
class="**:stroke-black size-5 lg:size-6 header-navbar-item"
|
|
/> -->
|
|
<NuxtImg
|
|
src="/img/navbar/profile.gif"
|
|
class="size-7 lg:size-8 mt-0.5"
|
|
/>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
<Tooltip title="محصولات">
|
|
<NuxtLink
|
|
to="/products"
|
|
class="flex-center header-navbar-item"
|
|
>
|
|
<!-- <Icon
|
|
name="ci:search"
|
|
class="**:stroke-black size-4.5 lg:size-[21px]"
|
|
/> -->
|
|
<NuxtImg
|
|
src="/img/navbar/search.gif"
|
|
class="size-7 lg:size-8 mt-0.5"
|
|
/>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
<Tooltip title="سبد خرید">
|
|
<NuxtLink
|
|
to="/cart"
|
|
class="flex-center header-navbar-item"
|
|
>
|
|
<button class="relative">
|
|
<!-- <Icon
|
|
name="ci:cart"
|
|
class="**:stroke-black size-5 lg:size-6 header-navbar-item"
|
|
/> -->
|
|
<NuxtImg
|
|
src="/img/navbar/cart.gif"
|
|
class="size-7 lg:size-8"
|
|
/>
|
|
|
|
<div
|
|
v-if="cart?.items.length! > 0"
|
|
class="size-2 shrink-0 absolute -bottom-1.5 -right-1.5 rounded-full bg-red-600 after:size-[125%] after:absolute after:bg-red-600 flex-center after:rounded-full after:animate-ping"
|
|
/>
|
|
</button>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
<nav
|
|
class="flex-center gap-6 lg:gap-[2.5rem] typo-label-xs lg:typo-label-sm font-light text-black/80 header-navbar-item"
|
|
>
|
|
<NuxtLink
|
|
v-for="(link, index) in NAV_LINKS"
|
|
:key="index"
|
|
:to="link.path"
|
|
@click="isCategoriesMenuOpen = false"
|
|
class="underline-offset-[10px]"
|
|
:activeClass="isCategoriesMenuOpen ? 'no-underline' : 'underline'"
|
|
:class="isCategoriesMenuOpen && link.title === 'دسته بندی ها' ? 'underline' : ''"
|
|
@mouseenter="link.title === 'دسته بندی ها' ? (isCategoriesMenuOpen = true) : undefined"
|
|
>
|
|
{{ link.title }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="header-navbar-item flex items-center justify-end h-full">
|
|
<!-- <NuxtImg
|
|
src="/img/heymlz/heymlz-logomotion.gif"
|
|
preload
|
|
loading="eager"
|
|
fetch-priority="high"
|
|
class="h-2/3"
|
|
/> -->
|
|
<NuxtImg
|
|
src="/img/heymlz/heymlz-logomotion.gif"
|
|
preload
|
|
loading="eager"
|
|
fetch-priority="high"
|
|
class="h-2/3"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<SideDrawer v-model="isSideDrawerOpen" />
|
|
|
|
<MegaMenu
|
|
:items="megaMenuCategories"
|
|
v-model:isOpen="isCategoriesMenuOpen"
|
|
/>
|
|
</template>
|