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.
 
 
 

269 lines
9.1 KiB

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 = {};