import React, { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { connect } from "react-redux"; import _ from "lodash"; import Drawer from "../Drawer"; import Search from "../Search"; //assets import cartIcon from "./dark-crimson-cart-icon.svg"; import whiteCartIcon from "./white-cart-icon.svg"; import profileIcon from "./dark-crimson-profile-icon.svg"; import searchIcon from "./dark-crimson-search-box.svg"; import lightGraySearchIcon from "./light-gray-search-box.svg"; import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg"; import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg"; import grayBagIcon from "../../assets/icons/gray-bag.svg"; import graySearchIcon from "../../assets/icons/gray-search.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({ pages, isDark, isMobile, headerOptions, loginBtn, menuItems, category, searchBox, topHeader, bottomHeader, productCategoryTextColor, menuItemsColor, }) { const navigation = useNavigate(); const { logo, hamburgerMenu, qr, shown, menu, title, back, bookmark } = headerOptions; const [top, setTop] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false); const [desktopMiddleFix, setDesktopMiddleFix] = useState(false); const [desktopEndTransform, setDesktopEndTransform] = useState(false); useEffect(() => { var lastScroll = window.scrollY; if (window.scrollY === 0) { setTop(() => true); } if (isMobile) { window.addEventListener("scroll", () => { if (window.scrollY === 0) { setTop(() => true); } else { setTop(() => false); } }); } if (!isMobile) { window.addEventListener("scroll", () => { if (window.scrollY >= 64) { setDesktopMiddleFix(() => true); } else { setDesktopMiddleFix(() => false); } if (window.scrollY > lastScroll && window.scrollY >= 90) { setDesktopEndTransform(() => true); } else { setDesktopEndTransform(() => false); } lastScroll = window.scrollY; }); } }, []); 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 )} {menu && ( menu )} {title && back ? ( back navigation(-1)} /> ) : null}
{/* portrait end */}
) : (
انتخاب کشور پیگیری سفارش
شکایات  ورود و ثبت نام
Design System
{/* */} {/* */}
{/* */} دسته بندی کالاها  
{menuItems.map((item, index) => ( {item} ))}
); } const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, isMobile: state.publicApi.isMobile, headerOptions: state.publicApi.headerOptions, }); export default connect(mapStateToProps, {})(Navbar); Navbar.defaultProps = { pages: [ { link: "/products", name: "محصولات", }, { link: "/filter", name: "دسته بندیها", }, { link: "/contact", name: "تماس با ما", }, { link: "/about-us", name: "درباره ما", }, { link: "/orders", name: "پیگیری", }, { link: "/blogs", name: "وبلاگ", }, ], logo: true, hamburgerMenu: true, qr: true, productCategoryTextColor: "text-productPrice", menuItemsColor: "text-productPrice", border: "border", topHeader: true, bottomHeader: true, menuItems: [ "محصولات", "دسته بندی", "تماس با ما", "درباره ما", "پیگیری", "وبلاگ", ], category: true, searchBox: true, // icons loginBtn: true, };