|
|
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> |
|
|
); |
|
|
}
|
|
|
|