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
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: "وبلاگ", |
|
}, |
|
], |
|
};
|
|
|