|
|
|
@ -1,5 +1,5 @@ |
|
|
|
import React, { useEffect, useState } from "react"; |
|
|
|
import React, { useEffect, useState } from "react"; |
|
|
|
import { Link, useNavigate } from "react-router-dom"; |
|
|
|
import { Link, useNavigate, NavLink } from "react-router-dom"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { userProduct, userFavorite } from "../../redux/actions"; |
|
|
|
import { userProduct, userFavorite } from "../../redux/actions"; |
|
|
|
import location from "../../utils/location"; |
|
|
|
import location from "../../utils/location"; |
|
|
|
@ -9,6 +9,7 @@ import _ from "lodash"; |
|
|
|
import Drawer from "../Drawer"; |
|
|
|
import Drawer from "../Drawer"; |
|
|
|
import Search from "../Search"; |
|
|
|
import Search from "../Search"; |
|
|
|
import SearchResult from "./SearchResult"; |
|
|
|
import SearchResult from "./SearchResult"; |
|
|
|
|
|
|
|
import Loading from "../Loading"; |
|
|
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
//assets
|
|
|
|
import cartIcon from "./cart-blue.svg"; |
|
|
|
import cartIcon from "./cart-blue.svg"; |
|
|
|
@ -24,18 +25,24 @@ import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg"; |
|
|
|
import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; |
|
|
|
import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; |
|
|
|
import dotsMenuDarkIcon from "../../assets/icons/dots-menu-dark.svg"; |
|
|
|
import dotsMenuDarkIcon from "../../assets/icons/dots-menu-dark.svg"; |
|
|
|
import bookmarkDeactiveDarkIcon from "../../assets/icons/bookmark-deactive-dark.svg"; |
|
|
|
import bookmarkDeactiveDarkIcon from "../../assets/icons/bookmark-deactive-dark.svg"; |
|
|
|
|
|
|
|
import bookmarkActiveDarkIcon from "../../assets/icons/bookmark-active-dark.svg"; |
|
|
|
import dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg"; |
|
|
|
import dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg"; |
|
|
|
import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg"; |
|
|
|
import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg"; |
|
|
|
|
|
|
|
import bookmarkActiveLightIcon from "../../assets/icons/bookmark-active-light.svg"; |
|
|
|
|
|
|
|
|
|
|
|
function Navbar({ |
|
|
|
function Navbar({ |
|
|
|
getCartProducts, |
|
|
|
getCartProducts, |
|
|
|
|
|
|
|
getUserFavorite, |
|
|
|
cartProductsLength, |
|
|
|
cartProductsLength, |
|
|
|
pages, |
|
|
|
pages, |
|
|
|
isDark, |
|
|
|
isDark, |
|
|
|
isMobile, |
|
|
|
isMobile, |
|
|
|
isLogin, |
|
|
|
user, |
|
|
|
headerOptions, |
|
|
|
headerOptions, |
|
|
|
addToFavorite, |
|
|
|
addToFavorite, |
|
|
|
|
|
|
|
deleteBookmark, |
|
|
|
|
|
|
|
bookmarkLoading, |
|
|
|
|
|
|
|
userFavoriteList, |
|
|
|
language, |
|
|
|
language, |
|
|
|
}) { |
|
|
|
}) { |
|
|
|
const navigation = useNavigate(); |
|
|
|
const navigation = useNavigate(); |
|
|
|
@ -46,11 +53,22 @@ function Navbar({ |
|
|
|
const [search, setSearch] = useState(null); |
|
|
|
const [search, setSearch] = useState(null); |
|
|
|
const [drawerOpen, setDrawerOpen] = useState(false); |
|
|
|
const [drawerOpen, setDrawerOpen] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const isActiveBookmark = React.useMemo(() => { |
|
|
|
|
|
|
|
return userFavoriteList?.find((object) => |
|
|
|
|
|
|
|
headerOptions?.productId |
|
|
|
|
|
|
|
? object?.productId === headerOptions?.productId |
|
|
|
|
|
|
|
: object?.contentId === headerOptions?.contentId |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}, [headerOptions, userFavoriteList]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log(Boolean(isActiveBookmark)); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (window.scrollY === 0) { |
|
|
|
if (window.scrollY === 0) { |
|
|
|
setTop(() => true); |
|
|
|
setTop(() => true); |
|
|
|
} |
|
|
|
} |
|
|
|
if (isMobile) { |
|
|
|
if (isMobile) { |
|
|
|
|
|
|
|
// getUserFavorite();
|
|
|
|
window.addEventListener("scroll", () => { |
|
|
|
window.addEventListener("scroll", () => { |
|
|
|
if (window.scrollY === 0) { |
|
|
|
if (window.scrollY === 0) { |
|
|
|
setTop(() => true); |
|
|
|
setTop(() => true); |
|
|
|
@ -62,30 +80,60 @@ function Navbar({ |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (!isMobile && isLogin) { |
|
|
|
if (!isMobile && user) { |
|
|
|
console.log(111); |
|
|
|
|
|
|
|
getCartProducts(); |
|
|
|
getCartProducts(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, [isLogin]); |
|
|
|
}, [user]); |
|
|
|
|
|
|
|
|
|
|
|
return isMobile ? ( |
|
|
|
return ( |
|
|
|
<div |
|
|
|
<div |
|
|
|
className={_.join( |
|
|
|
className="z-50 flex fixed left-0 top-0 w-full" |
|
|
|
[ |
|
|
|
|
|
|
|
"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={{ |
|
|
|
style={{ |
|
|
|
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "", |
|
|
|
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "", |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{/* landscape start */} |
|
|
|
<div className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3 px-4" style={{ |
|
|
|
{/* landscape end */} |
|
|
|
backgroundColor: isDark ? "#061B30" : "white" |
|
|
|
{/* portrait start */} |
|
|
|
}}> |
|
|
|
|
|
|
|
{/* desktop */} |
|
|
|
|
|
|
|
<div className=" items-center hidden lg:flex"> |
|
|
|
|
|
|
|
<Link |
|
|
|
|
|
|
|
to="/" |
|
|
|
|
|
|
|
className="flex items-center text-2xl font-black text-green7B" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<img src={logoIcon} className="w-8 relative bottom-1 ml-1" alt="" /> |
|
|
|
|
|
|
|
{window.t("دانوین")} |
|
|
|
|
|
|
|
</Link> |
|
|
|
|
|
|
|
|
|
|
|
<div className="w-full h-full relative flex flex-row items-center justify-between lg:hidden py-3 px-4"> |
|
|
|
<ul className="flex list-none items-center relative top-0.5 mr-4"> |
|
|
|
<div className="relative"> |
|
|
|
{pages.map((page, index) => ( |
|
|
|
|
|
|
|
<li key={index}> |
|
|
|
|
|
|
|
<NavLink |
|
|
|
|
|
|
|
to={page.link} |
|
|
|
|
|
|
|
className="text-tiny py-2 px-4 mx-4" |
|
|
|
|
|
|
|
style={({ isActive }) => ({ |
|
|
|
|
|
|
|
color: isActive ? "rgb(19, 123, 79)" : "#202020", |
|
|
|
|
|
|
|
fontWeight: isActive ? "700" : "200", |
|
|
|
|
|
|
|
})} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{page.name} |
|
|
|
|
|
|
|
</NavLink> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
{logo && ( |
|
|
|
|
|
|
|
<Link |
|
|
|
|
|
|
|
to="/" |
|
|
|
|
|
|
|
className="lg:hidden 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> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
{/* desktop */} |
|
|
|
|
|
|
|
{/* <div className="flex items-center"></div> */} |
|
|
|
|
|
|
|
<div className="flex lg:hidden relative"> |
|
|
|
{hamburgerMenu && ( |
|
|
|
{hamburgerMenu && ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<span className="w-2.5 h-2.5 rounded-full bg-redFF1 absolute -left-1 -top-1 animate-bounce"></span> |
|
|
|
<span className="w-2.5 h-2.5 rounded-full bg-redFF1 absolute -left-1 -top-1 animate-bounce"></span> |
|
|
|
@ -97,7 +145,6 @@ function Navbar({ |
|
|
|
/> |
|
|
|
/> |
|
|
|
</> |
|
|
|
</> |
|
|
|
)} |
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
{!title && back ? ( |
|
|
|
{!title && back ? ( |
|
|
|
<img |
|
|
|
<img |
|
|
|
src={isDark ? arrowWhiteIcon : arrowBlueIcon} |
|
|
|
src={isDark ? arrowWhiteIcon : arrowBlueIcon} |
|
|
|
@ -112,29 +159,31 @@ function Navbar({ |
|
|
|
</strong> |
|
|
|
</strong> |
|
|
|
)} |
|
|
|
)} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{logo && ( |
|
|
|
<div className="flex items-center"> |
|
|
|
<Link |
|
|
|
{overLayer && ( |
|
|
|
to="/" |
|
|
|
<div |
|
|
|
className="absolute left-1/2 transform -translate-y-1/2 top-1/2 -translate-x-1/2" |
|
|
|
className="z-30 w-screen h-full fixed top-0 right-0 backdrop-filter blur-sm bg-opacity-60 bg-gray-600" |
|
|
|
> |
|
|
|
onClick={() => setOverLayer(false)} |
|
|
|
<img src={logoIcon} className="w-6 h-8" /> |
|
|
|
> |
|
|
|
</Link> |
|
|
|
<div className="relative w-full h-full"> |
|
|
|
)} |
|
|
|
<div |
|
|
|
|
|
|
|
className="flex flex-col w-full absolute left-1/2 top-16 transform -translate-x-1/2 z-50 rounded-md" |
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
style={{ maxWidth: "calc(100vw / 3)" }} |
|
|
|
|
|
|
|
onClick={(e) => e.stopPropagation()} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Search onChange={(val) => setSearch(val)} /> |
|
|
|
|
|
|
|
{search && <SearchResult text={search} setText={setSearch} />} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
{qr && ( |
|
|
|
{qr && ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<Link |
|
|
|
<Link |
|
|
|
to="/scan" |
|
|
|
to="/scan" |
|
|
|
className={_.join( |
|
|
|
className={`flex lg:hidden rounded-sm p-1.5 ${ |
|
|
|
[ |
|
|
|
isDark ? "bg-blueC0 bg-opacity-10 ml-2" : " ml-3 shadow-sm" |
|
|
|
"rounded-sm p-1.5", |
|
|
|
}`}
|
|
|
|
isDark |
|
|
|
|
|
|
|
? "bg-blueC0 bg-opacity-10 ml-2" |
|
|
|
|
|
|
|
: " ml-3 shadow-sm", |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
" " |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`, |
|
|
|
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`, |
|
|
|
}} |
|
|
|
}} |
|
|
|
@ -147,13 +196,9 @@ function Navbar({ |
|
|
|
</Link> |
|
|
|
</Link> |
|
|
|
<Link |
|
|
|
<Link |
|
|
|
to="/ar" |
|
|
|
to="/ar" |
|
|
|
className={_.join( |
|
|
|
className={`flex lg:hidden rounded-sm p-1.5 ${ |
|
|
|
[ |
|
|
|
isDark ? "bg-blueC0 bg-opacity-10" : "shadow-sm" |
|
|
|
"rounded-sm p-1.5", |
|
|
|
}`}
|
|
|
|
isDark ? "bg-blueC0 bg-opacity-10" : " shadow-sm", |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
" " |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
style={{ |
|
|
|
style={{ |
|
|
|
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`, |
|
|
|
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`, |
|
|
|
}} |
|
|
|
}} |
|
|
|
@ -166,144 +211,109 @@ function Navbar({ |
|
|
|
</Link> |
|
|
|
</Link> |
|
|
|
</> |
|
|
|
</> |
|
|
|
)} |
|
|
|
)} |
|
|
|
{bookmark && ( |
|
|
|
{bookmark ? ( |
|
|
|
<img |
|
|
|
bookmarkLoading ? ( |
|
|
|
src={ |
|
|
|
<Loading size={2} color="bg-green-500" /> |
|
|
|
isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon |
|
|
|
) : isActiveBookmark ? ( |
|
|
|
} |
|
|
|
<img |
|
|
|
alt="bookmark" |
|
|
|
src={ |
|
|
|
className="w-7" |
|
|
|
isDark ? bookmarkActiveDarkIcon : bookmarkActiveLightIcon |
|
|
|
onClick={() => addToFavorite({ [bookmark]: location.getId() })} |
|
|
|
} |
|
|
|
/> |
|
|
|
alt="bookmark" |
|
|
|
)} |
|
|
|
className="w-7 flex lg:hidden" |
|
|
|
|
|
|
|
onClick={() => |
|
|
|
|
|
|
|
deleteBookmark({ |
|
|
|
|
|
|
|
id: userFavoriteList?.find( |
|
|
|
|
|
|
|
(object) => object?.productId === headerOptions?.productId |
|
|
|
|
|
|
|
)?.id, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<img |
|
|
|
|
|
|
|
src={ |
|
|
|
|
|
|
|
isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
alt="bookmark" |
|
|
|
|
|
|
|
className="w-7 flex lg:hidden" |
|
|
|
|
|
|
|
onClick={() => addToFavorite({ [bookmark]: location.getId() })} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
) : null} |
|
|
|
{menu && ( |
|
|
|
{menu && ( |
|
|
|
<img |
|
|
|
<img |
|
|
|
src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon} |
|
|
|
src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon} |
|
|
|
alt="menu" |
|
|
|
alt="menu" |
|
|
|
className="w-7 mr-2" |
|
|
|
className="w-7 mr-2 flex lg:hidden" |
|
|
|
/> |
|
|
|
/> |
|
|
|
)} |
|
|
|
)} |
|
|
|
{title && back ? ( |
|
|
|
{title && back ? ( |
|
|
|
<img |
|
|
|
<img |
|
|
|
src={isDark ? arrowWhiteIcon : arrowBlueIcon} |
|
|
|
src={isDark ? arrowWhiteIcon : arrowBlueIcon} |
|
|
|
alt="back" |
|
|
|
alt="back" |
|
|
|
className={`w-6 transform ${isDark ? "" : "-rotate-180"}`} |
|
|
|
className={`w-6 flex lg:hidden transform ${ |
|
|
|
|
|
|
|
isDark ? "" : "-rotate-180" |
|
|
|
|
|
|
|
}`}
|
|
|
|
onClick={() => navigation(-1)} |
|
|
|
onClick={() => navigation(-1)} |
|
|
|
/> |
|
|
|
/> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
</div> |
|
|
|
{/* desktop */} |
|
|
|
</div> |
|
|
|
<select |
|
|
|
|
|
|
|
style={{ width: "100px" }} |
|
|
|
|
|
|
|
className="hidden lg:flex items-center text-blueC0 border border-blueC0 px-1 rounded base py-1.5 ml-4 cursor-pointer" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{language.map((item, index) => ( |
|
|
|
|
|
|
|
<option |
|
|
|
|
|
|
|
className="border border-blueC0 shadow-0 text-blueC0 text-base " |
|
|
|
|
|
|
|
key={index} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{item.name} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</select> |
|
|
|
|
|
|
|
|
|
|
|
<Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} /> |
|
|
|
<img |
|
|
|
{/* portrait end */} |
|
|
|
src={searchIcon} |
|
|
|
</div> |
|
|
|
alt="" |
|
|
|
) : ( |
|
|
|
className="w-7 ml-3 cursor-pointer lg:flex hidden" |
|
|
|
<header |
|
|
|
onClick={() => setOverLayer(true)} |
|
|
|
className={`w-full border-b border-gray-200 border-solid fixed top-0 right-0 bg-white z-20`} |
|
|
|
/> |
|
|
|
style={{ boxShadow: "0px 0px 10px rgba(0,0,0,0.1)" }} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div className={`w-11/12 mx-auto flex flex-col`}> |
|
|
|
|
|
|
|
<div className="w-full flex flex-row items-center py-3 relative justify-between h-ful"> |
|
|
|
|
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
|
|
|
|
<Link |
|
|
|
|
|
|
|
to="/" |
|
|
|
|
|
|
|
className="flex flex-row items-center text-2xl font-black text-green7B" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<img |
|
|
|
|
|
|
|
src={logoIcon} |
|
|
|
|
|
|
|
className="w-8 relative bottom-1 ml-1" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
{window.t("دانوین")} |
|
|
|
|
|
|
|
</Link> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ul className="flex flex-row list-none items-center relative top-0.5 mr-6"> |
|
|
|
{user && ( |
|
|
|
{pages.map((page, index) => ( |
|
|
|
<div className="hidden lg:flex justify-end items-center gap-4"> |
|
|
|
<li key={index}> |
|
|
|
<Link to="/cart" className="relative"> |
|
|
|
<Link |
|
|
|
<img src={cartIcon} alt="" className="w-8" /> |
|
|
|
to={page.link} |
|
|
|
<span className="absolute -right-2 -top-0.5 w-4 p-2.5 h-4 flex justify-center items-center bg-green-700 bg-opacity-100 rounded-full text-white text-xs"> |
|
|
|
className="text-tiny font-semibold text-green7B py-2 px-4 mx-4" |
|
|
|
{cartProductsLength} |
|
|
|
> |
|
|
|
</span> |
|
|
|
{page.name} |
|
|
|
</Link> |
|
|
|
</Link> |
|
|
|
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */} |
|
|
|
</li> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{overLayer && ( |
|
|
|
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */} |
|
|
|
<div |
|
|
|
|
|
|
|
className="z-30 w-screen h-full fixed top-0 right-0 backdrop-filter blur-sm bg-opacity-60 bg-gray-600" |
|
|
|
|
|
|
|
onClick={() => setOverLayer(false)} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div className="relative w-full h-full"> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
className="flex flex-col w-full absolute left-1/2 top-16 transform -translate-x-1/2 z-50 rounded-md" |
|
|
|
|
|
|
|
style={{ maxWidth: "calc(100vw / 3)" }} |
|
|
|
|
|
|
|
onClick={(e) => e.stopPropagation()} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Search onChange={(val) => setSearch(val)} /> |
|
|
|
|
|
|
|
{search && <SearchResult text={search} setText={setSearch} />} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
)} |
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
{!user ? ( |
|
|
|
<select |
|
|
|
<Link |
|
|
|
style={{ width: "100px" }} |
|
|
|
to="/signup" |
|
|
|
className="flex items-center text-blueC0 border border-blueC0 px-1 rounded base py-1.5 ml-4 cursor-pointer" |
|
|
|
className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm" |
|
|
|
> |
|
|
|
> |
|
|
|
{language.map((item, index) => ( |
|
|
|
{window.t("ورود یا ثبت نام")} |
|
|
|
<option |
|
|
|
</Link> |
|
|
|
className="border border-blueC0 shadow-0 text-blueC0 text-base " |
|
|
|
) : ( |
|
|
|
key={index} |
|
|
|
<Link |
|
|
|
> |
|
|
|
to="/dashboard" |
|
|
|
{item.name} |
|
|
|
className="hidden lg:flex bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm" |
|
|
|
</option> |
|
|
|
> |
|
|
|
))} |
|
|
|
{window.t("حساب کاربری")} |
|
|
|
</select> |
|
|
|
</Link> |
|
|
|
|
|
|
|
)} |
|
|
|
<img |
|
|
|
{/* desktop */} |
|
|
|
src={searchIcon} |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
className="w-7 ml-3 cursor-pointer" |
|
|
|
|
|
|
|
onClick={() => setOverLayer(true)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{isLogin && ( |
|
|
|
|
|
|
|
<div className="flex justify-end items-center gap-4"> |
|
|
|
|
|
|
|
<Link to="/cart" className="relative"> |
|
|
|
|
|
|
|
<img src={cartIcon} alt="" className="w-8" /> |
|
|
|
|
|
|
|
<span className="absolute -right-2 -top-0.5 w-4 p-2.5 h-4 flex justify-center items-center bg-green-700 bg-opacity-100 rounded-full text-white text-xs"> |
|
|
|
|
|
|
|
{cartProductsLength} |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</Link> |
|
|
|
|
|
|
|
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{!isLogin ? ( |
|
|
|
|
|
|
|
<Link |
|
|
|
|
|
|
|
to="/signup" |
|
|
|
|
|
|
|
className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{window.t("ورود یا ثبت نام")} |
|
|
|
|
|
|
|
</Link> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<Link |
|
|
|
|
|
|
|
to="/dashboard" |
|
|
|
|
|
|
|
className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{window.t("حساب کاربری")} |
|
|
|
|
|
|
|
</Link> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
|
|
<Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} /> |
|
|
|
|
|
|
|
</div> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -311,15 +321,19 @@ const mapStateToProps = (state) => ({ |
|
|
|
isDark: state.publicApi.isDark, |
|
|
|
isDark: state.publicApi.isDark, |
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
headerOptions: state.publicApi.headerOptions, |
|
|
|
headerOptions: state.publicApi.headerOptions, |
|
|
|
isLogin: state.user.status, |
|
|
|
user: state.user.status, |
|
|
|
cartProductsLength: state.userProduct.list?.filter( |
|
|
|
cartProductsLength: state.userProduct.list?.filter( |
|
|
|
(product) => product.condition < 2 |
|
|
|
(product) => product.condition < 2 |
|
|
|
)?.length, |
|
|
|
)?.length, |
|
|
|
|
|
|
|
bookmarkLoading: state.userFavorite.loading, |
|
|
|
|
|
|
|
userFavoriteList: state.userFavorite.list, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
const mapDispatchToProps = { |
|
|
|
getCartProducts: userProduct.list, |
|
|
|
getCartProducts: userProduct.list, |
|
|
|
addToFavorite: userFavorite.add, |
|
|
|
addToFavorite: userFavorite.add, |
|
|
|
|
|
|
|
deleteBookmark: userFavorite.del, |
|
|
|
|
|
|
|
getUserFavorite: userFavorite.list |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Navbar); |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Navbar); |
|
|
|
|
Your Name
2 years ago
