|
|
import React, { Component } from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
import AddCircleOutlineRoundedIcon from "@material-ui/icons/AddCircleOutlineRounded"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import { toast } from "react-toastify"; |
|
|
import Avatar from "@material-ui/core/Avatar"; |
|
|
|
|
|
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"; |
|
|
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; |
|
|
import { user } from "~/Redux/actions"; |
|
|
|
|
|
import mobileHome from "~/assets/icons/mobileHome.svg"; |
|
|
import mobileAr from "~/assets/icons/mobileAr.svg"; |
|
|
import qrcode from "~/assets/icons/drawer-qr.png"; |
|
|
import mobileBasket from "~/assets/icons/mobileBasket.svg"; |
|
|
import mobileBlog from "~/assets/icons/mobileBlog.svg"; |
|
|
import mobileMail from "~/assets/icons/mobileMail.svg"; |
|
|
import mobileProfile from "~/assets/icons/mobileProfile.svg"; |
|
|
import mobileDanger from "~/assets/icons/mobileDanger.svg"; |
|
|
import mobileLogout from "~/assets/icons/mobileLogout.svg"; |
|
|
import proxy from "~/Redux/proxy"; |
|
|
import "./NavbarDrawer.scss"; |
|
|
class NavbarDrawer extends Component { |
|
|
state = { |
|
|
dropdown: false, |
|
|
}; |
|
|
|
|
|
render() { |
|
|
const statusx = proxy.status(); |
|
|
this.links = [ |
|
|
{ |
|
|
name: window.t("صفحه اصلی"), |
|
|
link: "/", |
|
|
icon: <img src={mobileHome} alt={window.t("صفحه اصلی")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "ورود یا ثبت نام", |
|
|
link: "/auth", |
|
|
icon: <img src={mobileLogout} alt={window.t("کتابهای من")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("درباره ما"), |
|
|
link: "/about", |
|
|
icon: <img src={mobileBlog} alt={window.t("کتابهای من")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("فروشگاه"), |
|
|
link: "/products", |
|
|
icon: <img src={mobileBlog} alt={window.t("کتابهای من")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("سبد خرید"), |
|
|
link: "/cart", |
|
|
icon: <img src={mobileBlog} alt={window.t("کتابهای من")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "بلاگ", |
|
|
link: "/blogs", |
|
|
icon: <img src={mobileBlog} alt="بلاگ" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("پشتیبانی"), |
|
|
link: "/support", |
|
|
icon: <img src={mobileDanger} alt={window.t("پشتیبانی")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
// onClick: this.props.logout, |
|
|
}, |
|
|
]; |
|
|
this.links2 = [ |
|
|
{ |
|
|
name: window.t("صفحه اصلی"), |
|
|
link: "/", |
|
|
icon: <img src={mobileHome} alt={window.t("صفحه اصلی")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("واقعیت افزوده"), |
|
|
link: "/ar", |
|
|
icon: <img src={mobileAr} alt={window.t("واقعیت افزوده")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("بارکد خوان"), |
|
|
link: "/qr-scan", |
|
|
icon: <img src={qrcode} alt={window.t("بارکد خوان")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("کتابهای من"), |
|
|
link: "/mybooks", |
|
|
icon: <img src={mobileBlog} alt={window.t("کتابهای من")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("سبد خرید"), |
|
|
link: "/cart", |
|
|
icon: <img src={mobileBasket} alt={window.t("فروشگاه")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "بلاگ", |
|
|
link: "/blogs", |
|
|
icon: <img src={mobileBlog} alt="بلاگ" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("دانوینیها"), |
|
|
link: "/", |
|
|
icon: <img src={mobileProfile} alt={window.t("دانوینیها")} />, |
|
|
toast: window.t("به زودی این بخش فعال می شود"), |
|
|
message: "به زودی", |
|
|
}, |
|
|
{ |
|
|
name: window.t("پشتیبانی"), |
|
|
link: "/support", |
|
|
icon: <img src={mobileDanger} alt={window.t("پشتیبانی")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
// onClick: this.props.logout, |
|
|
}, |
|
|
{ |
|
|
name: window.t("ویرایش مشخصات"), |
|
|
link: "/profile", |
|
|
icon: <img src={mobileMail} alt={window.t("ویرایش مشخصات")} />, |
|
|
toast: "", |
|
|
// message: "4 پیام", |
|
|
}, |
|
|
{ |
|
|
name: window.t("بروز رسانی"), |
|
|
link: "/", |
|
|
icon: <img src={mobileLogout} alt={window.t("خروج")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
window.location.reload(true); |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
name: window.t("خروج"), |
|
|
link: "/auth", |
|
|
icon: <img src={mobileLogout} alt={window.t("خروج")} />, |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
this.props.logout({}); |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
const { status } = this.props; |
|
|
|
|
|
let score = 2; |
|
|
return ( |
|
|
<div className="navbar-drawer d-flex flex-column"> |
|
|
{statusx ? ( |
|
|
<div className="navbar-drawer__header d-flex align-items-center"> |
|
|
<> |
|
|
<Avatar |
|
|
style={{ width: 60, height: 60 }} |
|
|
alt="Remy Sharp" |
|
|
src={ |
|
|
status.picFileId |
|
|
? `https://dnvn.ir/api/v1/file/${status.picFileId}` |
|
|
: "" |
|
|
} |
|
|
/> |
|
|
|
|
|
<div className="navbar-drawer__header--right d-fex flex-column"> |
|
|
<h1>{status.firstName + " " + status.lastName}</h1> |
|
|
</div> |
|
|
</> |
|
|
|
|
|
{this.state.dropdown ? ( |
|
|
<div |
|
|
className="navbar-drawer__header--dropdown" |
|
|
onClick={() => this.setState({ dropdown: false })} |
|
|
> |
|
|
{score ? <span>{score} امتیاز</span> : null} |
|
|
<KeyboardArrowUpIcon style={{ color: "grey", fontSize: 30 }} /> |
|
|
</div> |
|
|
) : ( |
|
|
<div |
|
|
className="navbar-drawer__header--dropdown" |
|
|
onClick={() => this.setState({ dropdown: true })} |
|
|
> |
|
|
{score ? <span>{score} امتیاز</span> : null}{" "} |
|
|
<KeyboardArrowDownIcon |
|
|
style={{ color: "grey", fontSize: 30 }} |
|
|
/> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
) : null} |
|
|
{this.state.dropdown ? ( |
|
|
<div className="navbar-drawer__dropdown d-flex flex-column"> |
|
|
{/* {this.props.users.map((item, i) => ( |
|
|
<User data={item} key={i} /> |
|
|
))} */} |
|
|
<Link |
|
|
to={"/newProfile"} |
|
|
// key={this.props.users.length + 1} |
|
|
style={{ color: "#4e4e4e" }} |
|
|
> |
|
|
<div className="navbar-drawer__bottom--link d-flex"> |
|
|
<AddCircleOutlineRoundedIcon |
|
|
style={{ fontSize: 30, color: "#777", margin: "0px 8px" }} |
|
|
/> |
|
|
<div>اضافه کردن کاربر </div> |
|
|
{/* {item.message && <div class="badge">{item.message}</div>} */} |
|
|
</div> |
|
|
</Link> |
|
|
</div> |
|
|
) : null} |
|
|
<div className="navbar-drawer__bottom mt-3"> |
|
|
{(statusx ? this.links2 : this.links).map((item, key) => ( |
|
|
<Link |
|
|
to={item.link} |
|
|
key={key} |
|
|
onClick={ |
|
|
item.onClick || |
|
|
(() => (item.link === "" ? toast.error(item.toast) : null)) |
|
|
} |
|
|
> |
|
|
<div className="navbar-drawer__bottom--link d-flex"> |
|
|
{item.icon} |
|
|
<div>{item.name}</div> |
|
|
{item.message && <div class="badge">{item.message}</div>} |
|
|
</div> |
|
|
</Link> |
|
|
))} |
|
|
|
|
|
{/* <div className="navbar-drawer__bottom--version d-flex"> |
|
|
<span>نسخه نرمافزار 3.1</span> |
|
|
</div> */} |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
export default connect((state) => ({ status: state.user.status }), { |
|
|
logout: user.logout, |
|
|
})(NavbarDrawer);
|
|
|
|