You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

353 lines
11 KiB

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 ? (
<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"
/>
</>
)}
{!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>
)}
<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"
/>
)}
{title && back ? (
<img
src={isDark ? arrowWhiteIcon : arrowBlueIcon}
alt="back"
className={`w-6 ${isDark ? "" : "transform -rotate-180"}`}
onClick={() => navigation(-1)}
/>
) : null}
</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">
شکایات&nbsp;
</span>
<span className="text-sm font-normal text-blue52">
ورود و ثبت نام
</span>
</div>
</div>
<div
className={`w-full flex flex-col z-20 ${
desktopMiddleFix ? "" : ""
}`}
>
<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>
<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 ? "" : ""
}`}
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}`}>
دسته بندی کالاها&nbsp;&nbsp;
</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}
>
{item}
</a>
))}
</div>
</div>
</div>
</header>
);
}
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,
};