|
|
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, publicApi } 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, |
|
|
}, |
|
|
}; |
|
|
|
|
|
// const changeLanguage = (val) => { |
|
|
// if (val === "fa") { |
|
|
// localStorage.removeItem("language"); |
|
|
// } else if (val === "en") { |
|
|
// localStorage.setItem("language", "en"); |
|
|
// } else { |
|
|
// localStorage.setItem("language", "ar"); |
|
|
// } |
|
|
// window.location.reload(); |
|
|
// }; |
|
|
|
|
|
class LaptopNavbar extends Component { |
|
|
state = {}; |
|
|
|
|
|
render() { |
|
|
const { status } = this.props; |
|
|
if (this.state.navigatePath) |
|
|
return <Navigate path={this.state.navigatePath} />; |
|
|
const 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" }, |
|
|
]; |
|
|
return ( |
|
|
<nav |
|
|
className={`laptop-navbar d-flex ${window.lang === "en" ? "ltr" : ""}`} |
|
|
> |
|
|
<div className={`d-flex ${window.lang === "en" ? "ltr" : ""}`}> |
|
|
<Link to="/" className="laptop-navbar__logo"> |
|
|
<img src={logo} alt={window.t("لوگو")} /> |
|
|
</Link> |
|
|
<ul |
|
|
className={`laptop-navbar__list d-flex ${ |
|
|
window.lang === "en" ? "ltr" : "" |
|
|
}`} |
|
|
> |
|
|
{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", |
|
|
}} |
|
|
> |
|
|
{window.t("دانلود")} |
|
|
</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div |
|
|
className={`d-flex align-items-center ${ |
|
|
window.lang === "en" ? "ltr" : "" |
|
|
}`} |
|
|
> |
|
|
{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"> |
|
|
{window.t("سبد خرید")}{" "} |
|
|
<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"}>{window.t("ویرایش مشخصات")}</Link> |
|
|
</MenuItem> |
|
|
<MenuItem onClick={() => this.setState({ dropdown: false })}> |
|
|
<Link to={"/orders"}>{window.t("پیگری سفارشات")}</Link> |
|
|
</MenuItem> |
|
|
<MenuItem onClick={() => this.setState({ dropdown: false })}> |
|
|
<Link to={"/myBooks"}>{window.t("کتاب های من")}</Link> |
|
|
</MenuItem> |
|
|
<MenuItem |
|
|
onClick={() => { |
|
|
this.props.logout({}); |
|
|
this.setState({ dropdown: false }); |
|
|
}} |
|
|
> |
|
|
{window.t("خروج")}{" "} |
|
|
</MenuItem> |
|
|
</Menu> |
|
|
<select |
|
|
className="language-select" |
|
|
onChange={(e) => { |
|
|
window.localStorage.setItem("language", e.target.value); |
|
|
window.reLang(e.target.value); |
|
|
this.props.changeLanguage(); |
|
|
this.setState({ navigatePath: "/reset" }); |
|
|
|
|
|
//window.location.reload(); |
|
|
}} |
|
|
> |
|
|
{[ |
|
|
{ key: "فارسی", lang: "fa", default: true }, |
|
|
{ key: "English", lang: "en" }, |
|
|
{ key: "العربیه", lang: "ar" }, |
|
|
].map((el, index) => ( |
|
|
<option |
|
|
key={el.lang} |
|
|
value={el.lang} |
|
|
selected={ |
|
|
(!window.lang && el.default) || el.lang == window.lang |
|
|
} |
|
|
> |
|
|
{el.key} |
|
|
</option> |
|
|
))} |
|
|
</select> |
|
|
<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> |
|
|
</> |
|
|
) : ( |
|
|
<div |
|
|
className={`d-flex ${ |
|
|
window.lang === "en" ? "flex-row-reverse" : "" |
|
|
}`} |
|
|
> |
|
|
<select |
|
|
className="language-select" |
|
|
onChange={(e) => { |
|
|
window.localStorage.setItem("language", e.target.value); |
|
|
// window.location.reload(); |
|
|
window.reLang(e.target.value); |
|
|
this.props.changeLanguage(); |
|
|
this.setState({ navigatePath: "/reset" }); |
|
|
}} |
|
|
> |
|
|
{console.log(window.lang)} |
|
|
|
|
|
{[ |
|
|
{ key: "فارسی", lang: "fa", default: true }, |
|
|
{ key: "English", lang: "en" }, |
|
|
{ key: "العربیه", lang: "ar" }, |
|
|
].map((el, index) => ( |
|
|
<option |
|
|
key={el.lang} |
|
|
value={el.lang} |
|
|
selected={ |
|
|
(!window.lang && el.default) || el.lang == window.lang |
|
|
} |
|
|
> |
|
|
{el.key} |
|
|
</option> |
|
|
))} |
|
|
</select> |
|
|
<Link |
|
|
style={{ fontSize: fontSize.desktop.a }} |
|
|
to={"/auth"} |
|
|
className="laptop-navbar__signup" |
|
|
> |
|
|
{window.t("ورود یا ثبتنام")} |
|
|
</Link> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
</nav> |
|
|
); |
|
|
} |
|
|
} |
|
|
export default connect( |
|
|
(state) => ({ status: state.user.status, lang: state.publicApi.lang }), |
|
|
{ |
|
|
changeLanguage: publicApi.changeLanguage, |
|
|
|
|
|
logout: user.logout, |
|
|
} |
|
|
)(LaptopNavbar); |
|
|
LaptopNavbar.defaultProps = {};
|
|
|
|