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

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