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.
107 lines
2.7 KiB
107 lines
2.7 KiB
import React, { useState, Component } from "react"; |
|
import { Link } 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 hamburger from "../../../../assets/icons/hamburger.png"; |
|
import search from "../../../../assets/icons/navbarSearch.png"; |
|
|
|
import "./index.scss"; |
|
|
|
const useStyles = makeStyles({ |
|
list: { |
|
width: window.innerWidth * 0.8, |
|
}, |
|
fullList: { |
|
width: "auto", |
|
direction: "rtl", |
|
textAlign: "right", |
|
}, |
|
}); |
|
|
|
export default function MobileNavbar(props) { |
|
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> |
|
); |
|
return ( |
|
<nav className="mobile-navbar d-flex"> |
|
<div |
|
className="mobile-navbar__menu" |
|
onClick={toggleDrawer("right", true)} |
|
> |
|
<img src={hamburger} alt="منو" /> |
|
</div> |
|
<Link |
|
to="/" |
|
className="mobile-navbar__logo" |
|
style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }} |
|
> |
|
<img src={logo} alt="لوگو" /> |
|
</Link> |
|
<div className="mobile-navbar__left"> |
|
{page === "home" ? ( |
|
<img src={search} alt="جستجو" /> |
|
) : ( |
|
<div className="d-flex align-items-center"> |
|
<Link to={"/products"}> |
|
<img src={search} alt="جستجو" /> |
|
</Link> |
|
<Link to={"/qr-scan"}> |
|
<img src={qr} alt="QR" /> |
|
</Link> |
|
<Link to={"/ar"}> |
|
<img src={ar} alt="AR" /> |
|
</Link> |
|
</div> |
|
)} |
|
</div> |
|
<SwipeableDrawer |
|
anchor="right" |
|
open={state["right"]} |
|
onClose={toggleDrawer("right", false)} |
|
onOpen={toggleDrawer("right", true)} |
|
> |
|
{list(props, "right")} |
|
</SwipeableDrawer> |
|
</nav> |
|
); |
|
}
|
|
|