|
|
import React, { Component } from "react"; |
|
|
|
|
|
import proxy from "~/Redux/proxy"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import Avatar from "@material-ui/core/Avatar"; |
|
|
import logo from "~/assets/icons/logo.png"; |
|
|
import basket from "~/assets/icons/basket.png"; |
|
|
|
|
|
import MenuItem from "@material-ui/core/MenuItem"; |
|
|
import Menu from "@material-ui/core/Menu"; |
|
|
import { connect } from "react-redux"; |
|
|
import "./index.scss"; |
|
|
import { useHistory } from "react-router-dom"; |
|
|
import { user } from "~/Redux/actions"; |
|
|
function Navigate({ path }) { |
|
|
let history = useHistory(); |
|
|
return <>{history.push(path)}</>; |
|
|
} |
|
|
const maxDesktopSize = 1250; |
|
|
|
|
|
const fontSize = { |
|
|
desktop: { |
|
|
li: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85, |
|
|
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85, |
|
|
}, |
|
|
}; |
|
|
|
|
|
class LaptopNavbar extends Component { |
|
|
state = {}; |
|
|
|
|
|
render() { |
|
|
const { status } = this.props; |
|
|
if (this.state.navigatePath) return <Navigate path={this.navigatePath} />; |
|
|
const { links } = this.props; |
|
|
return ( |
|
|
<nav className="laptop-navbar d-flex"> |
|
|
<div className="d-flex"> |
|
|
<Link to="/" className="laptop-navbar__logo"> |
|
|
<img src={logo} alt=window.t("لوگو") /> |
|
|
</Link> |
|
|
<ul className="laptop-navbar__list d-flex"> |
|
|
{links.map((item, i) => ( |
|
|
<li style={{ fontSize: fontSize.desktop.li }} key={i}> |
|
|
<Link |
|
|
to={item.to} |
|
|
style={{ |
|
|
color: |
|
|
this.props.page === item.page ? "#6cbe44" : "#6f7074", |
|
|
}} |
|
|
> |
|
|
{item.name} |
|
|
</Link> |
|
|
</li> |
|
|
))} |
|
|
<li style={{ fontSize: fontSize.desktop.li }}> |
|
|
<span |
|
|
onClick={() => { |
|
|
window.scrollTo(0, document.body.scrollHeight); |
|
|
}} |
|
|
style={{ |
|
|
cursor: "pointer", |
|
|
color: "#6f7074", |
|
|
}} |
|
|
> |
|
|
دانلود |
|
|
</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div className="d-flex align-items-center"> |
|
|
{proxy.status() ? ( |
|
|
<> |
|
|
{/* <Dropdown> |
|
|
<Dropdown.Toggle variant="success" id="dropdown-basic"> |
|
|
Dropdown Button |
|
|
</Dropdown.Toggle> |
|
|
|
|
|
<Dropdown.Menu> |
|
|
<Dropdown.Item href="#/action-1">Action</Dropdown.Item> |
|
|
<Dropdown.Item href="#/action-2"> |
|
|
Another action |
|
|
</Dropdown.Item> |
|
|
<Dropdown.Item href="#/action-3"> |
|
|
Something else |
|
|
</Dropdown.Item> |
|
|
</Dropdown.Menu> |
|
|
</Dropdown> */} |
|
|
|
|
|
<Link to="/cart" className="laptop-navbar__logout"> |
|
|
سبد خرید |
|
|
<img |
|
|
width="20" |
|
|
height="23" |
|
|
src={basket} |
|
|
alt=window.t("سبد خرید") |
|
|
style={{ marginRight: 5 }} |
|
|
/> |
|
|
</Link> |
|
|
<Menu |
|
|
id="menu-desktop-navbar" |
|
|
anchorEl={this.state.anchorEl} |
|
|
keepMounted |
|
|
anchorOrigin={{ |
|
|
vertical: "bottom", |
|
|
horizontal: "center", |
|
|
}} |
|
|
transformOrigin={{ |
|
|
vertical: "bottom", |
|
|
horizontal: "center", |
|
|
}} |
|
|
open={this.state.dropdown || false} |
|
|
onClose={() => this.setState({ dropdown: false })} |
|
|
> |
|
|
<MenuItem onClick={() => this.setState({ dropdown: false })}> |
|
|
<Link to={"/profile"}>ویرایش مشخصات</Link> |
|
|
</MenuItem> |
|
|
<MenuItem onClick={() => this.setState({ dropdown: false })}> |
|
|
<Link to={"/orders"}>پیگری سفارشات</Link> |
|
|
</MenuItem> |
|
|
<MenuItem onClick={() => this.setState({ dropdown: false })}> |
|
|
<Link to={"/myBooks"}>کتاب های من</Link> |
|
|
</MenuItem> |
|
|
<MenuItem |
|
|
onClick={() => { |
|
|
this.props.logout({}); |
|
|
this.setState({ dropdown: false }); |
|
|
}} |
|
|
> |
|
|
خروج |
|
|
</MenuItem> |
|
|
</Menu> |
|
|
<div |
|
|
className="navbar-drawer__header d-flex align-items-center" |
|
|
onClick={(event) => |
|
|
this.setState({ |
|
|
dropdown: !this.state.dropdown, |
|
|
anchorEl: event.currentTarget, |
|
|
}) |
|
|
} |
|
|
> |
|
|
<div |
|
|
className="laptop-navbar__header--right d-fex flex-column" |
|
|
style={{ fontSize: "13px" }} |
|
|
> |
|
|
{status.firstName + " " + status.lastName} |
|
|
</div>{" "} |
|
|
<Avatar |
|
|
style={{ width: 40, height: 40, marginRight: 10 }} |
|
|
alt="Remy Sharp" |
|
|
src={ |
|
|
status.picFileId |
|
|
? `https://dnvn.ir/api/v1/file/${status.picFileId}` |
|
|
: "" |
|
|
} |
|
|
/> |
|
|
</div> |
|
|
</> |
|
|
) : ( |
|
|
<> |
|
|
<Link |
|
|
style={{ fontSize: fontSize.desktop.a }} |
|
|
to={"/auth"} |
|
|
className="laptop-navbar__signup" |
|
|
> |
|
|
ورود یا ثبتنام |
|
|
</Link> |
|
|
</> |
|
|
)} |
|
|
</div> |
|
|
</nav> |
|
|
); |
|
|
} |
|
|
} |
|
|
export default connect((state) => ({ status: state.user.status }), { |
|
|
logout: user.logout, |
|
|
})(LaptopNavbar); |
|
|
LaptopNavbar.defaultProps = { |
|
|
links: [ |
|
|
{ name: window.t("صفحه اصلی"), to: "/", page: "home" }, |
|
|
{ name: window.t("فروشگاه"), to: "/products", page: "products" }, |
|
|
{ name: window.t("سوالات متداول"), to: "/faq", page: "faq" }, |
|
|
{ name: window.t("درباره ما"), to: "/about", page: "about" }, |
|
|
{ name: window.t("پشتیبانی"), to: "/contact", page: "contact" }, |
|
|
], |
|
|
};
|
|
|
|