import React, { useEffect, useState } from "react"; import { Link, useNavigate, NavLink } from "react-router-dom"; import { connect } from "react-redux"; import { userProduct, userFavorite } from "../../redux/actions"; import location from "../../utils/location"; import _ from "lodash"; //components import Drawer from "../Drawer"; import Search from "../Search"; import SearchResult from "./SearchResult"; import Loading from "../Loading"; //assets import cartIcon from "./cart-blue.svg"; import searchIcon from "./dark-crimson-search-box.svg"; import logoIcon from "../../assets/icons/logo.svg"; import qrIcon from "../../assets/icons/qr-white.svg"; import qrBlueIcon from "../../assets/icons/qr-blue.svg"; import arIcon from "../../assets/icons/ar-white.svg"; import arBlueIcon from "../../assets/icons/ar-blue.svg"; import hamburgerIcon from "../../assets/icons/hamburger.svg"; import hamburgerBlueIcon from "../../assets/icons/hamburger-blue.svg"; import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg"; import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; import dotsMenuDarkIcon from "../../assets/icons/dots-menu-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 bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg"; import bookmarkActiveLightIcon from "../../assets/icons/bookmark-active-light.svg"; function Navbar({ getCartProducts, getUserFavorite, cartProductsLength, pages, isDark, isMobile, user, headerOptions, addToFavorite, deleteBookmark, bookmarkLoading, userFavoriteList, language, }) { const navigation = useNavigate(); const { logo, hamburgerMenu, qr, shown, menu, title, back, bookmark } = headerOptions; const [overLayer, setOverLayer] = useState(false); const [top, setTop] = useState(false); const [search, setSearch] = useState(null); 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(() => { if (window.scrollY === 0) { setTop(() => true); } if (isMobile) { // getUserFavorite(); window.addEventListener("scroll", () => { if (window.scrollY === 0) { setTop(() => true); } else { setTop(() => false); } }); } }, []); useEffect(() => { if (!isMobile && user) { getCartProducts(); } }, [user]); return (
{/* desktop */}
{window.t("دانوین")}
    {pages.map((page, index) => (
  • ({ color: isActive ? "rgb(19, 123, 79)" : "#202020", fontWeight: isActive ? "700" : "200", })} > {page.name}
  • ))}
{logo && ( )} {/* desktop */} {/*
*/}
{hamburgerMenu && ( <> setDrawerOpen((prevState) => !prevState)} src={isDark ? hamburgerIcon : hamburgerBlueIcon} alt="" className="w-7 h-7.5" /> )} {!title && back ? ( back navigation(-1)} /> ) : null} {title && ( {title} )}
{overLayer && (
setOverLayer(false)} >
e.stopPropagation()} > setSearch(val)} /> {search && }
)} {qr && ( <> )} {bookmark ? ( bookmarkLoading ? ( ) : isActiveBookmark ? ( bookmark deleteBookmark({ id: userFavoriteList?.find( (object) => object?.productId === headerOptions?.productId )?.id, }) } /> ) : ( bookmark addToFavorite({ [bookmark]: location.getId() })} /> ) ) : null} {menu && ( menu )} {title && back ? ( back navigation(-1)} /> ) : null} {/* desktop */} setOverLayer(true)} /> {user && (
{cartProductsLength} {/* */} {/* */}
)} {!user ? ( {window.t("ورود یا ثبت نام")} ) : ( {window.t("حساب کاربری")} )} {/* desktop */}
); } const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, isMobile: state.publicApi.isMobile, headerOptions: state.publicApi.headerOptions, user: state.user.status, cartProductsLength: state.userProduct.list?.filter( (product) => product.condition < 2 )?.length, bookmarkLoading: state.userFavorite.loading, userFavoriteList: state.userFavorite.list, }); const mapDispatchToProps = { getCartProducts: userProduct.list, addToFavorite: userFavorite.add, deleteBookmark: userFavorite.del, getUserFavorite: userFavorite.list }; export default connect(mapStateToProps, mapDispatchToProps)(Navbar); Navbar.defaultProps = { pages: [ { link: "/products", name: window.t("فروشگاه"), }, { link: "/contact-us", name: window.t("تماس با ما"), }, { link: "/about-us", name: window.t("درباره دانوین"), }, { link: "/blogs", name: window.t("مجله دانوین"), }, ], logo: true, hamburgerMenu: true, qr: true, productCategoryTextColor: "text-productPrice", menuItemsColor: "text-productPrice", border: "border", topHeader: true, bottomHeader: true, menuItems: [ `${window.t("محصولات")}`, `${window.t("دسته بندی")}`, `${window.t("تماس با ما")}`, `${window.t("درباره ما")}`, `${window.t("پیگیری")}`, `${window.t("وبلاگ")}`, ], category: true, searchBox: true, // icons loginBtn: true, language: [{ name: "فارسی" }, { name: "english" }, { name: "العربیه" }], };