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.
 
 
 

167 lines
4.9 KiB

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import _ from "lodash";
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";
function Navbar({ pages, isDark, isLogin }) {
const [top, setTop] = useState(false);
useEffect(() => {
if (window.scrollY === 0) {
setTop(() => true);
}
window.addEventListener("scroll", () => {
if (window.scrollY === 0) {
setTop(() => true);
} else {
setTop(() => false);
}
});
}, []);
return (
<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",
!top ? "bg-white" : "",
],
" "
)}
>
{/* landscape start */}
<div className="flex-row items-center hidden lg:flex">
<Link to="/">
<img src={logoIcon} alt="" className="w-9" />
</Link>
<ul className="list-none p-0 m-0 flex flex-row">
{pages.map((page, i) => (
<li
key={i}
className="lg:px-6 lg:text-sm xl:px-8 xl:text-md 2xl:px-10 py-4 text-primary "
>
<Link to={page.link}>{page.name}</Link>
</li>
))}
</ul>
</div>
<div className="flex-1 flex-row items-center py-4 justify-end hidden lg:flex">
<button className="border-0 outline-none">
<img className="w-7 h-7" src={graySearchIcon} alt="" />
</button>
<button className="border-0 outline-none mr-2">
<img className="w-7 h-7" src={grayBagIcon} alt="" />
</button>
<button className="rounded-sm bg-gray mr-10 bg-blueC0 px-6 py-0.5 text-sm leading-7 text-white">
ثبت نام
</button>
</div>
{/* landscape end */}
{/* portrait start */}
<div className="w-full h-full relative flex flex-row items-center justify-between lg:hidden pt-6 pb-2 px-4">
<div className="relative">
<span className="w-2.5 h-2.5 rounded-full bg-redFF1 absolute -left-1 -top-1 animate-bounce"></span>
<img
src={isDark ? hamburgerIcon : hamburgerBlueIcon}
alt=""
className="w-7 h-7.5"
/>
</div>
<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>
{isLogin && (
<div className="flex flex-row items-center">
<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>
</div>
)}
</div>
{/* portrait end */}
</div>
);
}
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isLogin: state.user.status,
});
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: "وبلاگ",
},
],
};