80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
'use client'
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { menuItems } from "@/utils";
|
|
import ProductContext from "@/app/contexts/productContext";
|
|
|
|
const FullWidthMenu = ({ isOpen, onClose, isScrolled }) => {
|
|
const [isRendered, setIsRendered] = useState(false);
|
|
const { category } = useContext(ProductContext);
|
|
|
|
|
|
|
|
const categoryItems = category?.map((category) => ({
|
|
label: category.category_name,
|
|
url: `/collections/${category.id}`,
|
|
})) || []
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setIsRendered(true);
|
|
} else {
|
|
const timer = setTimeout(() => setIsRendered(false), 300); // Match this with the transition duration
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
if (!isRendered && !isOpen) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`fixed ${
|
|
isScrolled ? "top-24" : "top-36"
|
|
} left-0 max-w-[100%] w-full sm:h-full h-[90vh] hide-navbar overflow-y-scroll text-slate-900 bg-white z-40 shadow-md transition-transform duration-300 ease-in ${
|
|
isOpen ? "translate-x-0" : "-translate-x-full "
|
|
} `}
|
|
>
|
|
{/* hidden items only show on mobile devices */}
|
|
<div className="flex flex-col space-y-8 sm:hidden ml-7 border-b py-6">
|
|
{categoryItems.map((item) => (
|
|
<category
|
|
key={item.label}
|
|
href={item.url}
|
|
className="text-2xl font-medium hover:text-[#AC8C6B] transition-colors"
|
|
onClick={onClose}
|
|
>
|
|
{item.label}
|
|
</category>
|
|
))}
|
|
</div>
|
|
<div className="container mx-auto sm:py-20 py-7 px-6 flex sm:gap-44 md:gap-36 gap-7 sm:flex-row md:flex-row flex-col">
|
|
{/* left section */}
|
|
<div className="sm:h-[70vh] flex flex-col p-3 justify-evenly sm:gap-8 gap-7 sm:ml-10 sm:border-b pb-8">
|
|
{menuItems.map((menuItem, index) => (
|
|
<Link href={menuItem.link} key={index} onClick={onClose}>
|
|
<h2 className="text-xl font-semibold text-slate-900 hover:text-[#AC8C6B] transition-colors">
|
|
{menuItem.name}
|
|
</h2>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* right section */}
|
|
<div className="flex flex-col p-3 justify-evenly sm:gap-3 gap-7 sm:ml-10 min-h-[300px]">
|
|
{categoryItems?.map((item) => (
|
|
<Link href={item.url} key={item.id} onClick={onClose}>
|
|
<h2 className="text-xl font-semibold text-slate-900">
|
|
{item.label}
|
|
</h2>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FullWidthMenu;
|