|
|
|
|
@ -69,13 +69,12 @@ function Navbar({ |
|
|
|
|
|
|
|
|
|
if (!isMobile) { |
|
|
|
|
window.addEventListener("scroll", () => { |
|
|
|
|
|
|
|
|
|
if (window.scrollY >= 64) { |
|
|
|
|
setDesktopMiddleFix(() => true); |
|
|
|
|
} else { |
|
|
|
|
setDesktopMiddleFix(() => false); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (window.scrollY > lastScroll && window.scrollY >= 90) { |
|
|
|
|
setDesktopEndTransform(() => true); |
|
|
|
|
} else { |
|
|
|
|
@ -85,227 +84,214 @@ function Navbar({ |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, []); |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{isMobile ? ( |
|
|
|
|
<div |
|
|
|
|
className={_.join( |
|
|
|
|
[ |
|
|
|
|
"z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300", |
|
|
|
|
], |
|
|
|
|
" " |
|
|
|
|
return isMobile ? ( |
|
|
|
|
<div |
|
|
|
|
className={_.join( |
|
|
|
|
[ |
|
|
|
|
"z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300", |
|
|
|
|
], |
|
|
|
|
" " |
|
|
|
|
)} |
|
|
|
|
style={{ |
|
|
|
|
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{/* landscape start */} |
|
|
|
|
|
|
|
|
|
{/* landscape end */} |
|
|
|
|
{/* portrait start */} |
|
|
|
|
<div className="w-full h-full relative flex flex-row items-center justify-between lg:hidden py-3 px-4"> |
|
|
|
|
<div className="relative"> |
|
|
|
|
{hamburgerMenu && ( |
|
|
|
|
<> |
|
|
|
|
<span className="w-2.5 h-2.5 rounded-full bg-redFF1 absolute -left-1 -top-1 animate-bounce"></span> |
|
|
|
|
<img |
|
|
|
|
onClick={() => setDrawerOpen((prevState) => !prevState)} |
|
|
|
|
src={isDark ? hamburgerIcon : hamburgerBlueIcon} |
|
|
|
|
alt="" |
|
|
|
|
className="w-7 h-7.5" |
|
|
|
|
/> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
style={{ |
|
|
|
|
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{/* landscape start */} |
|
|
|
|
{!title && back ? ( |
|
|
|
|
<img |
|
|
|
|
src={isDark ? arrowWhiteIcon : arrowBlueIcon} |
|
|
|
|
alt="back" |
|
|
|
|
className={`w-6 ${isDark ? "transform rotate-180" : ""}`} |
|
|
|
|
onClick={() => navigation(-1)} |
|
|
|
|
/> |
|
|
|
|
) : null} |
|
|
|
|
{title && ( |
|
|
|
|
<strong className="text-blueC0 text-lg font-semibold dark:text-white"> |
|
|
|
|
{title} |
|
|
|
|
</strong> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
{logo && ( |
|
|
|
|
<Link |
|
|
|
|
to="/" |
|
|
|
|
className="absolute left-1/2 transform -translate-y-1/2 top-1/2 -translate-x-1/2" |
|
|
|
|
> |
|
|
|
|
<img src={logoIcon} className="w-6 h-8" /> |
|
|
|
|
</Link> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
{/* landscape end */} |
|
|
|
|
{/* portrait start */} |
|
|
|
|
<div className="w-full h-full relative flex flex-row items-center justify-between lg:hidden py-3 px-4"> |
|
|
|
|
<div className="relative"> |
|
|
|
|
{hamburgerMenu && ( |
|
|
|
|
<> |
|
|
|
|
<span className="w-2.5 h-2.5 rounded-full bg-redFF1 absolute -left-1 -top-1 animate-bounce"></span> |
|
|
|
|
<img |
|
|
|
|
onClick={() => setDrawerOpen((prevState) => !prevState)} |
|
|
|
|
src={isDark ? hamburgerIcon : hamburgerBlueIcon} |
|
|
|
|
alt="" |
|
|
|
|
className="w-7 h-7.5" |
|
|
|
|
/> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
{!title && back ? ( |
|
|
|
|
<img |
|
|
|
|
src={isDark ? arrowWhiteIcon : arrowBlueIcon} |
|
|
|
|
alt="back" |
|
|
|
|
className={`w-6 ${isDark ? "transform rotate-180" : ""}`} |
|
|
|
|
onClick={() => navigation(-1)} |
|
|
|
|
/> |
|
|
|
|
) : null} |
|
|
|
|
{title && ( |
|
|
|
|
<strong className="text-blueC0 text-lg font-semibold dark:text-white"> |
|
|
|
|
{title} |
|
|
|
|
</strong> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
{logo && ( |
|
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
|
{qr && ( |
|
|
|
|
<> |
|
|
|
|
<Link |
|
|
|
|
to="/" |
|
|
|
|
className="absolute left-1/2 transform -translate-y-1/2 top-1/2 -translate-x-1/2" |
|
|
|
|
to="/qr" |
|
|
|
|
className={_.join( |
|
|
|
|
[ |
|
|
|
|
"rounded-sm p-1.5", |
|
|
|
|
isDark ? "bg-gray36 ml-2" : "bg-blueFF1 ml-3 shadow-sm", |
|
|
|
|
], |
|
|
|
|
" " |
|
|
|
|
)} |
|
|
|
|
style={{ |
|
|
|
|
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<img src={logoIcon} className="w-6 h-8" /> |
|
|
|
|
</Link> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
|
{qr && ( |
|
|
|
|
<> |
|
|
|
|
<Link |
|
|
|
|
to="/qr" |
|
|
|
|
className={_.join( |
|
|
|
|
[ |
|
|
|
|
"rounded-sm p-1.5", |
|
|
|
|
isDark |
|
|
|
|
? "bg-gray36 ml-2" |
|
|
|
|
: "bg-blueFF1 ml-3 shadow-sm", |
|
|
|
|
], |
|
|
|
|
" " |
|
|
|
|
)} |
|
|
|
|
style={{ |
|
|
|
|
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<img |
|
|
|
|
src={isDark ? qrIcon : qrBlueIcon} |
|
|
|
|
alt="" |
|
|
|
|
className={_.join(["w-6"], " ")} |
|
|
|
|
/> |
|
|
|
|
</Link> |
|
|
|
|
<Link |
|
|
|
|
to="/ar" |
|
|
|
|
className={_.join( |
|
|
|
|
[ |
|
|
|
|
"rounded-sm p-1.5", |
|
|
|
|
isDark ? "bg-gray36" : "bg-blueFF1 shadow-sm", |
|
|
|
|
], |
|
|
|
|
" " |
|
|
|
|
)} |
|
|
|
|
style={{ |
|
|
|
|
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<img |
|
|
|
|
src={isDark ? arIcon : arBlueIcon} |
|
|
|
|
alt="" |
|
|
|
|
className={_.join(["w-6"], " ")} |
|
|
|
|
/> |
|
|
|
|
</Link> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
{bookmark && ( |
|
|
|
|
<img |
|
|
|
|
src={ |
|
|
|
|
isDark |
|
|
|
|
? bookmarkDeactiveDarkIcon |
|
|
|
|
: bookmarkDeactiveLightIcon |
|
|
|
|
} |
|
|
|
|
alt="bookmark" |
|
|
|
|
className="w-7 ml-2" |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
{menu && ( |
|
|
|
|
<img |
|
|
|
|
src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon} |
|
|
|
|
alt="menu" |
|
|
|
|
className="w-7" |
|
|
|
|
src={isDark ? qrIcon : qrBlueIcon} |
|
|
|
|
alt="" |
|
|
|
|
className={_.join(["w-6"], " ")} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
{title && back ? ( |
|
|
|
|
</Link> |
|
|
|
|
<Link |
|
|
|
|
to="/ar" |
|
|
|
|
className={_.join( |
|
|
|
|
[ |
|
|
|
|
"rounded-sm p-1.5", |
|
|
|
|
isDark ? "bg-gray36" : "bg-blueFF1 shadow-sm", |
|
|
|
|
], |
|
|
|
|
" " |
|
|
|
|
)} |
|
|
|
|
style={{ |
|
|
|
|
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<img |
|
|
|
|
src={isDark ? arrowWhiteIcon : arrowBlueIcon} |
|
|
|
|
alt="back" |
|
|
|
|
className={`w-6 ${isDark ? "" : "transform -rotate-180"}`} |
|
|
|
|
onClick={() => navigation(-1)} |
|
|
|
|
src={isDark ? arIcon : arBlueIcon} |
|
|
|
|
alt="" |
|
|
|
|
className={_.join(["w-6"], " ")} |
|
|
|
|
/> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} /> |
|
|
|
|
{/* portrait end */} |
|
|
|
|
</Link> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
{bookmark && ( |
|
|
|
|
<img |
|
|
|
|
src={ |
|
|
|
|
isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon |
|
|
|
|
} |
|
|
|
|
alt="bookmark" |
|
|
|
|
className="w-7 ml-2" |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
{menu && ( |
|
|
|
|
<img |
|
|
|
|
src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon} |
|
|
|
|
alt="menu" |
|
|
|
|
className="w-7" |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
{title && back ? ( |
|
|
|
|
<img |
|
|
|
|
src={isDark ? arrowWhiteIcon : arrowBlueIcon} |
|
|
|
|
alt="back" |
|
|
|
|
className={`w-6 ${isDark ? "" : "transform -rotate-180"}`} |
|
|
|
|
onClick={() => navigation(-1)} |
|
|
|
|
/> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
<header className={`rounded-b-md w-full bg-transparent pb-4`}> |
|
|
|
|
<div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-6"> |
|
|
|
|
<div className="divide-x flex flex-row-reverse transform translate-x-2"> |
|
|
|
|
<span className="text-sm font-normal text-blue52 mr-6"> |
|
|
|
|
انتخاب کشور |
|
|
|
|
</span> |
|
|
|
|
<span className="text-sm font-normal text-blue52"> |
|
|
|
|
پیگیری سفارش |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div className="divide-x"> |
|
|
|
|
<span className="text-sm font-normal ml-6 text-blue52"> |
|
|
|
|
شکایات |
|
|
|
|
</span> |
|
|
|
|
<span className="text-sm font-normal text-blue52"> |
|
|
|
|
ورود و ثبت نام |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} /> |
|
|
|
|
{/* portrait end */} |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
<header className={`rounded-b-md w-full bg-transparent pb-4`}> |
|
|
|
|
<div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-6"> |
|
|
|
|
<div className="divide-x flex flex-row-reverse transform translate-x-2"> |
|
|
|
|
<span className="text-sm font-normal text-blue52 mr-6"> |
|
|
|
|
انتخاب کشور |
|
|
|
|
</span> |
|
|
|
|
<span className="text-sm font-normal text-blue52">پیگیری سفارش</span> |
|
|
|
|
</div> |
|
|
|
|
<div className="divide-x"> |
|
|
|
|
<span className="text-sm font-normal ml-6 text-blue52"> |
|
|
|
|
شکایات |
|
|
|
|
</span> |
|
|
|
|
<span className="text-sm font-normal text-blue52"> |
|
|
|
|
ورود و ثبت نام |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className={`w-full flex flex-col z-20 ${ |
|
|
|
|
desktopMiddleFix ? "fixed top-0 left-0" : "" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
<div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-4 px-5 z-20 border-b border-gray-200 border-solid "> |
|
|
|
|
<div className="ml-10"> |
|
|
|
|
<span className={`text-sm font-bold ml-4 text-gray-700`}> |
|
|
|
|
Design System |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className={`w-full flex flex-col z-20 ${ |
|
|
|
|
desktopMiddleFix ? "fixed top-0 left-0" : "" |
|
|
|
|
}`}
|
|
|
|
|
className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" |
|
|
|
|
style={{ maxWidth: "calc(100vw / 2)" }} |
|
|
|
|
></div> |
|
|
|
|
<div |
|
|
|
|
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" |
|
|
|
|
style={{ maxWidth: "calc(100vw / 2)" }} |
|
|
|
|
> |
|
|
|
|
<div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-4 px-5 z-20 border-b border-gray-200 border-solid "> |
|
|
|
|
<div className="ml-10"> |
|
|
|
|
<span className={`text-sm font-bold ml-4 text-gray-700`}> |
|
|
|
|
Design System |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" |
|
|
|
|
style={{ maxWidth: "calc(100vw / 2)" }} |
|
|
|
|
></div> |
|
|
|
|
<div |
|
|
|
|
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" |
|
|
|
|
style={{ maxWidth: "calc(100vw / 2)" }} |
|
|
|
|
> |
|
|
|
|
<Search /> |
|
|
|
|
</div> |
|
|
|
|
<Search /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="flex justify-end items-center"> |
|
|
|
|
<img src={cartIcon} alt="" className="w-5 h-5 ml-2" /> |
|
|
|
|
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */} |
|
|
|
|
{/* <img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> */} |
|
|
|
|
<img src={profileIcon} alt="" className="w-5 h-5" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex justify-end items-center"> |
|
|
|
|
<img src={cartIcon} alt="" className="w-5 h-5 ml-2" /> |
|
|
|
|
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */} |
|
|
|
|
{/* <img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> */} |
|
|
|
|
<img src={profileIcon} alt="" className="w-5 h-5" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
className={`flex items-center relative w-full h-10 px-4 border-b border-solid border-gray-200 transform bg-white ${ |
|
|
|
|
desktopEndTransform ? "-translate-y-10" : "" |
|
|
|
|
}`}
|
|
|
|
|
style={{ |
|
|
|
|
transition: "all 0.3s", |
|
|
|
|
transitionDelay : '0.1s', |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div className="ml-10 flex flex-row items-center"> |
|
|
|
|
<img |
|
|
|
|
src={darkCrimsonHamburgerMenu} |
|
|
|
|
alt="" |
|
|
|
|
className="w-5 transform translate-y-1 ml-2" |
|
|
|
|
/> |
|
|
|
|
{/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */} |
|
|
|
|
<span |
|
|
|
|
className={`text-sm text-blue52 ${productCategoryTextColor}`} |
|
|
|
|
> |
|
|
|
|
دسته بندی کالاها |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className="flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" |
|
|
|
|
style={{ maxWidth: "calc(100vw / 2)" }} |
|
|
|
|
<div |
|
|
|
|
className={`flex items-center relative w-full h-10 px-4 border-b border-solid border-gray-200 transform bg-white ${ |
|
|
|
|
desktopEndTransform ? "-translate-y-10" : "" |
|
|
|
|
}`}
|
|
|
|
|
style={{ |
|
|
|
|
transition: "all 0.3s", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div className="ml-10 flex flex-row items-center"> |
|
|
|
|
<img |
|
|
|
|
src={darkCrimsonHamburgerMenu} |
|
|
|
|
alt="" |
|
|
|
|
className="w-5 transform translate-y-1 ml-2" |
|
|
|
|
/> |
|
|
|
|
{/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */} |
|
|
|
|
<span className={`text-sm text-blue52 ${productCategoryTextColor}`}> |
|
|
|
|
دسته بندی کالاها |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className="flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" |
|
|
|
|
style={{ maxWidth: "calc(100vw / 2)" }} |
|
|
|
|
> |
|
|
|
|
{menuItems.map((item, index) => ( |
|
|
|
|
<a |
|
|
|
|
href="#" |
|
|
|
|
className={`text-sm text-blue52 ${menuItemsColor}`} |
|
|
|
|
key={index} |
|
|
|
|
> |
|
|
|
|
{menuItems.map((item, index) => ( |
|
|
|
|
<a |
|
|
|
|
href="#" |
|
|
|
|
className={`text-sm text-blue52 ${menuItemsColor}`} |
|
|
|
|
key={index} |
|
|
|
|
> |
|
|
|
|
{item} |
|
|
|
|
</a> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{item} |
|
|
|
|
</a> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</header> |
|
|
|
|
)} |
|
|
|
|
</> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</header> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
