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.
 
 
 

229 lines
6.7 KiB

import React, { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import { SwipeableDrawer } from "@material-ui/core";
import NavbarDrawer from "./NavbarDrawer/NavbarDrawer.js";
import clsx from "clsx";
import logo from "../../../../assets/icons/logoMobile.png";
import ar from "../../../../assets/icons/ar.png";
import qr from "../../../../assets/icons/qr.png";
import back from "../../../../assets/icons/back.png";
import hamburger from "../../../../assets/icons/hamburger.png";
import search from "../../../../assets/icons/navbarSearch.png";
import proxy from "~/Redux/proxy";
import "./index.scss";
function BackButton({ children }) {
let history = useHistory();
return (
<div type="button" onClick={() => history.goBack()}>
<img src={back} alt={window.t("بازگشت")} />
</div>
);
}
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();
};
const useStyles = makeStyles({
list: {
width: window.innerWidth * 0.8,
},
fullList: {
width: "auto",
direction: "rtl",
textAlign: "right",
},
});
export default function MobileNavbar(props) {
const status = proxy.status();
const classes = useStyles();
const [state, setState] = useState({
top: false,
left: false,
bottom: false,
right: false,
searchFlag: false,
});
const { page } = props;
const toggleDrawer = (anchor, open) => (event) => {
if (
event &&
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}
setState({ [anchor]: open });
};
const list = (props, anchor) => (
<div
className={clsx(classes.list, {
[classes.fullList]: anchor === "top" || anchor === "bottom",
})}
role="presentation"
>
<NavbarDrawer
setShare={props.setShare}
user={props.user}
logout={props.logout}
needUpdate={props.needUpdate}
/>
</div>
);
if (!status)
return (
<nav className="mobile-navbar d-flex">
<div
className={`d-flex ${window.lang === "en" ? "flex-row-reverse" : ""}`}
>
<div
className="mobile-navbar__menu"
style={{ marginTop: 10 }}
onClick={toggleDrawer("right", true)}
>
<img src={hamburger} alt={window.t("منو")} />
</div>
<Link to="/" className="mobile-navbar__logo2" style={{}}>
<img src={logo} alt={window.t("لوگو")} className="logo" />
</Link>
</div>
<div className="mobile-navbar__left d-flex" style={{ marginLeft: 10 }}>
<select
className="language-select"
onChange={(e) => {
window.localStorage.setItem("language", e.target.value);
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>
<Link
style={{ fontSize: 12 }}
to={"/auth"}
className="mobile-navbar__signup"
>
{window.t("ورود یا ثبتنام")}
</Link>
{page !== "home" ? <BackButton /> : null}
</div>
<SwipeableDrawer
anchor="right"
open={state["right"]}
onClose={toggleDrawer("right", false)}
onOpen={toggleDrawer("right", true)}
>
{list(props, "right")}
</SwipeableDrawer>
</nav>
);
return (
<nav className="mobile-navbar d-flex">
{/* <div
className="mobile-navbar__logo"
// style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
>
<Link to="/">
<img src={logo} alt={window.t("لوگو")} />
</Link>
</div> */}
<div
className="mobile-navbar__menu"
onClick={toggleDrawer("right", true)}
>
<img src={hamburger} alt={window.t("منو")} />
<Link to="/">
<img src={logo} alt={window.t("لوگو")} className="logo" />
</Link>
</div>
<div className="mobile-navbar__left">
<select
className="language-select"
onChange={(e) => {
window.localStorage.setItem("language", e.target.value);
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>
{page === "home" || page === "download" ? (
<Link to={"/products"}>
<img src={search} alt={window.t("جستجو")} />
</Link>
) : (
<div className="d-flex align-items-center">
{window.location.pathname !== "/products" &&
window.location.pathname !== "/mybooks" &&
window.location.pathname !== "/profile" && (
<Link to={"/products"}>
<img src={search} alt={window.t("جستجو")} />
</Link>
)}
{window.location.pathname !== "/qr-scan" &&
window.location.pathname !== "/profile" && (
<Link to={"/qr-scan"}>
<img src={qr} alt="QR" />
</Link>
)}
{window.location.pathname !== "/ar" &&
window.location.pathname !== "/profile" && (
<Link to={"/ar"}>
<img src={ar} alt="AR" />
</Link>
)}
<BackButton />
</div>
)}
</div>
<SwipeableDrawer
anchor="right"
open={state["right"]}
onClose={toggleDrawer("right", false)}
onOpen={toggleDrawer("right", true)}
swipeAreaWidth={10}
>
{list(props, "right")}
</SwipeableDrawer>
</nav>
);
}