Updated
This commit is contained in:
marzban-dev
@@ -26,7 +26,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="`/products/category/${slug}`">
|
||||
<NuxtLink :to="{ name: 'products-slug', params: { slug: ['category', slug] } }">
|
||||
<div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
|
||||
<Transition name="fade">
|
||||
<video
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<Button
|
||||
end-icon="ci:filter"
|
||||
variant="outlined"
|
||||
class="max-lg:size-11 rounded-xl max-lg:aspect-square lg:py-3.5"
|
||||
class="max-lg:size-11 rounded-xl max-lg:aspect-square lg:py-3.5 relative"
|
||||
>
|
||||
<span class="hidden lg:block"> فیلتر محصولات </span>
|
||||
</Button>
|
||||
|
||||
@@ -31,7 +31,7 @@ const isScrollLocked = useScrollLock(window);
|
||||
const navbarEl = ref<HTMLElement | null>(null);
|
||||
const { height: navbarHeight } = useElementSize(navbarEl);
|
||||
|
||||
const { $gsap: gsap } = useNuxtApp();
|
||||
const { $gsap: gsap, hooks } = useNuxtApp();
|
||||
let gsapTimeline: gsap.core.Timeline;
|
||||
|
||||
const prevNavbarStyle = ref({
|
||||
@@ -71,6 +71,12 @@ const updatePrevStyle = () => {
|
||||
prevNavbarStyle.value.itemFilter = getComputedStyle(headerNavbarItemEl).filter;
|
||||
};
|
||||
|
||||
const closeAfterNavigate = () => {
|
||||
hooks.hookOnce("page:finish", () => {
|
||||
emit("update:isOpen", false);
|
||||
});
|
||||
};
|
||||
|
||||
// watches
|
||||
|
||||
watch(
|
||||
@@ -92,12 +98,9 @@ watch(isOpen, async (newValue) => {
|
||||
updatePrevStyle();
|
||||
|
||||
gsapTimeline
|
||||
.to(
|
||||
".header-navbar-item",
|
||||
{
|
||||
filter: "invert(0%)",
|
||||
}
|
||||
)
|
||||
.to(".header-navbar-item", {
|
||||
filter: "invert(0%)",
|
||||
})
|
||||
.to(
|
||||
"#header-navbar",
|
||||
{
|
||||
@@ -146,7 +149,7 @@ onMounted(() => {
|
||||
<div
|
||||
v-if="isOpen"
|
||||
:style="{ marginTop: `${navbarHeight}px` }"
|
||||
class="fixed right-0 top-0 w-full z-999 bg-black/50 h-svh border-t border-slate-200 flex justify-center"
|
||||
class="max-md:hidden fixed right-0 top-0 w-full z-1100 bg-black/50 h-svh border-t border-slate-200 flex justify-center"
|
||||
>
|
||||
<div class="container">
|
||||
<div
|
||||
@@ -157,7 +160,7 @@ onMounted(() => {
|
||||
<button
|
||||
v-for="(item, index) in items"
|
||||
:key="item.title"
|
||||
class="text-black transition-all p-4 rounded-xl cursor-default text-start"
|
||||
class="text-black transition-all p-4 rounded-xl cursor-default text-start max-lg:text-sm"
|
||||
:class="index === selectedItem ? 'bg-blue-100 text-blue-500' : 'bg-slate-100'"
|
||||
:id="`mega-menu-tab-${index}`"
|
||||
@mouseenter="menuTabMouseEnter(index)"
|
||||
@@ -175,7 +178,7 @@ onMounted(() => {
|
||||
>
|
||||
<div
|
||||
:key="selectedItem"
|
||||
class="grid grid-cols-4 p-4 text-back w-full h-fit"
|
||||
class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4 text-back w-full h-fit"
|
||||
:style="{
|
||||
// gridTemplateRows: 'repeat(5, auto)',
|
||||
// justifyContent: 'center',
|
||||
@@ -183,10 +186,12 @@ onMounted(() => {
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="item in selectedItemSubItems"
|
||||
:to="'https://google.com'"
|
||||
class="p-4 whitespace-nowrap h-fit text-slate-500 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all"
|
||||
:to="{ name: 'products-slug', params: { slug: ['category', item.link] } }"
|
||||
@click="closeAfterNavigate"
|
||||
class="p-4 whitespace-nowrap h-fit text-slate-500 flex items-center justify-between hover:text-blue-500 hover:-translate-x-1.5 transition-all max-lg:text-sm"
|
||||
>
|
||||
<span class="truncate w-[90%]">
|
||||
<span class="truncate w-[90%] flex items-center gap-2">
|
||||
<span class="w-2 h-[3px] rounded-full bg-blue-400"> </span>
|
||||
{{ item.title }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
|
||||
@@ -15,25 +15,27 @@ withDefaults(defineProps<Props>(), {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="w-full flex flex-col gap-10 md:gap-[4rem] py-[5rem] container">
|
||||
<section class="w-full flex flex-col gap-10 @min-[48rem]:gap-[4rem] py-[5rem] container @container">
|
||||
<div
|
||||
v-if="withHeader"
|
||||
class="w-full flex justify-between items-center"
|
||||
>
|
||||
<span class="text-black typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4">
|
||||
<span class="text-black typo-h-6 @max-[40rem]:text-xl @min-[48rem]:typo-h-5 @min-[64rem]:typo-h-4">
|
||||
{{ title }}
|
||||
</span>
|
||||
<NuxtLink to="/products">
|
||||
<Button
|
||||
variant="primary"
|
||||
class="rounded-full max-md:h-[38px] max-md:text-xs"
|
||||
class="rounded-full @max-[48rem]:h-[38px] @max-[48rem]:text-xs"
|
||||
end-icon="ci:arrow-left"
|
||||
>
|
||||
نمایش همه
|
||||
</Button>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<ul class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-8 gap-5 sm:gap-8">
|
||||
<ul
|
||||
class="grid grid-cols-2 @min-[40rem]:grid-cols-3 @min-[64rem]:grid-cols-4 @min-[80rem]:grid-cols-5 gap-y-8 gap-5 @min-[40rem]:gap-8"
|
||||
>
|
||||
<li
|
||||
class="w-full"
|
||||
v-for="product in products"
|
||||
|
||||
Reference in New Issue
Block a user