import React, { useEffect, useState } from "react"; import { Link, useNavigate } 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"; //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 dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg"; import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg"; function Navbar({ getCartProducts, cartProductsLength, pages, isDark, isMobile, isLogin, headerOptions, addToFavorite, }) { 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); useEffect(() => { if (window.scrollY === 0) { setTop(() => true); } if (isMobile) { window.addEventListener("scroll", () => { if (window.scrollY === 0) { setTop(() => true); } else { setTop(() => false); } }); } }, []); useEffect(() => { if (!isMobile && isLogin) { console.log(111); getCartProducts(); } }, [isLogin]); return isMobile ? (
{/* landscape start */} {/* landscape end */} {/* portrait start */}
{hamburgerMenu && ( <> setDrawerOpen((prevState) => !prevState)} src={isDark ? hamburgerIcon : hamburgerBlueIcon} alt="" className="w-7 h-7.5" /> )} {!title && back ? ( back navigation(-1)} /> ) : null} {title && ( {title} )}
{logo && ( )}
{qr && ( <> )} {bookmark && ( bookmark addToFavorite({ [bookmark]: location.getId() })} /> )} {menu && ( menu )} {title && back ? ( back navigation(-1)} /> ) : null}
{/* portrait end */}
) : (
{window.t("دانوین")}
    {pages.map((page, index) => (
  • {page.name}
  • ))}
{overLayer && (
setOverLayer(false)} >
e.stopPropagation()} > setSearch(val)} /> {search && }
)}
setOverLayer(true)} /> {isLogin && (
{cartProductsLength} {/* */} {/* */}
)} {!isLogin ? ( {window.t("ورود یا ثبت نام")} ) : ( {window.t("حساب کاربری")} )}
); } const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, isMobile: state.publicApi.isMobile, headerOptions: state.publicApi.headerOptions, isLogin: state.user.status, cartProductsLength: state.userProduct.list?.filter( (product) => product.condition < 2 )?.length, }); const mapDispatchToProps = { getCartProducts: userProduct.list, addToFavorite: userFavorite.add, }; 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, };