|
|
import React, { Component } from "react"; |
|
|
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 CheckIcon from "@material-ui/icons/Check"; |
|
|
|
|
|
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"; |
|
|
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; |
|
|
// import { logout } from '../../../../Redux/actions/user'; |
|
|
// import { connect } from 'react-redux'; |
|
|
|
|
|
import user1 from "~/assets/images/user1.png"; |
|
|
import user2 from "~/assets/images/user2.png"; |
|
|
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 "./NavbarDrawer.scss"; |
|
|
class NavbarDrawer extends Component { |
|
|
state = { |
|
|
dropdown: false, |
|
|
}; |
|
|
|
|
|
render() { |
|
|
return ( |
|
|
<div className="navbar-drawer d-flex flex-column"> |
|
|
<div className="navbar-drawer__header d-flex"> |
|
|
{this.props.users.map((item, i) => |
|
|
item.status === 1 ? ( |
|
|
<React.Fragment key={i}> |
|
|
<Avatar |
|
|
style={{ width: 60, height: 60 }} |
|
|
alt="Remy Sharp" |
|
|
src={item.image} |
|
|
/> |
|
|
<div className="navbar-drawer__header--right d-fex flex-column"> |
|
|
<h1>{item.firstName + " " + item.lastName}</h1> |
|
|
<div>{item.title}</div> |
|
|
</div> |
|
|
</React.Fragment> |
|
|
) : null |
|
|
)} |
|
|
{this.state.dropdown ? ( |
|
|
<div |
|
|
className="navbar-drawer__header--dropdown" |
|
|
onClick={() => this.setState({ dropdown: false })} |
|
|
> |
|
|
<span>25 امتیاز</span> |
|
|
<KeyboardArrowUpIcon style={{ color: "grey", fontSize: 45 }} /> |
|
|
</div> |
|
|
) : ( |
|
|
<div |
|
|
className="navbar-drawer__header--dropdown" |
|
|
onClick={() => this.setState({ dropdown: true })} |
|
|
> |
|
|
<span>25 امتیاز</span> |
|
|
<KeyboardArrowDownIcon style={{ color: "grey", fontSize: 45 }} /> |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
{this.state.dropdown ? ( |
|
|
<div className="navbar-drawer__dropdown d-flex flex-column"> |
|
|
<Link |
|
|
to={"/newProfile"} |
|
|
key={this.props.users.length + 1} |
|
|
style={{ color: "#4e4e4e" }} |
|
|
> |
|
|
<div className="navbar-drawer__bottom--link d-flex"> |
|
|
<AddCircleOutlineRoundedIcon |
|
|
style={{ fontSize: 35, color: "#4e4e4e", margin: "0px 10px" }} |
|
|
/> |
|
|
<div>اضافه کردن کاربر </div> |
|
|
{/* {item.message && <div class="badge">{item.message}</div>} */} |
|
|
</div> |
|
|
</Link> |
|
|
{this.props.users.map((item, i) => ( |
|
|
<User data={item} key={i} /> |
|
|
))} |
|
|
</div> |
|
|
) : null} |
|
|
<div className="navbar-drawer__bottom mt-3"> |
|
|
{this.props.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 NavbarDrawer; |
|
|
// export default connect((state) => ({ isLogin: state.user.isLogin }), { logout })(NavbarDrawer); |
|
|
|
|
|
NavbarDrawer.defaultProps = { |
|
|
users: [ |
|
|
{ |
|
|
id: 1, |
|
|
firstName: "اکبر", |
|
|
lastName: "خراسانی", |
|
|
title: "استاد علوم تجربی", |
|
|
image: user2, |
|
|
status: 1, |
|
|
}, |
|
|
], |
|
|
links: [ |
|
|
{ |
|
|
name: "صفحه اصلی", |
|
|
link: "/", |
|
|
icon: <img src={mobileHome} alt="صفحه اصلی" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "واقعیت افزوده", |
|
|
link: "/ar", |
|
|
icon: <img src={mobileAr} alt="واقعیت افزوده" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "بارکد خوان", |
|
|
link: "/qr-scan", |
|
|
icon: <img src={qrcode} alt="بارکد خوان" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "کتابهای من", |
|
|
link: "/mybooks", |
|
|
icon: <img src={mobileBlog} alt="کتابهای من" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "فروشگاه", |
|
|
link: "/products", |
|
|
icon: <img src={mobileBasket} alt="فروشگاه" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "بلاگ", |
|
|
link: "/blogs", |
|
|
icon: <img src={mobileBlog} alt="بلاگ" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "پیام رسان", |
|
|
link: "/", |
|
|
icon: <img src={mobileProfile} alt="پیام رسان" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: "پشتیبانی", |
|
|
link: "/support", |
|
|
icon: <img src={mobileDanger} alt="پشتیبانی" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
// onClick: this.props.logout, |
|
|
}, |
|
|
{ |
|
|
name: "ویرایش مشخصات", |
|
|
link: "/profile", |
|
|
icon: <img src={mobileMail} alt="ویرایش مشخصات" />, |
|
|
toast: "", |
|
|
message: "4 پیام", |
|
|
}, |
|
|
{ |
|
|
name: "خروج", |
|
|
link: "/", |
|
|
icon: <img src={mobileLogout} alt="خروج" />, |
|
|
toast: "", |
|
|
message: "", |
|
|
// onClick: this.props.logout, |
|
|
}, |
|
|
], |
|
|
}; |
|
|
|
|
|
const User = (props) => { |
|
|
return ( |
|
|
<div |
|
|
className="navbar-drawer-user d-flex align-items-center" |
|
|
style={{ backgroundColor: props.data.status === 1 ? "#eee" : "white" }} |
|
|
> |
|
|
<Avatar |
|
|
style={{ width: 55, height: 55 }} |
|
|
alt={props.data.firstName + " " + props.data.lastName} |
|
|
src={props.data.image} |
|
|
/> |
|
|
<div className="navbar-drawer-user__right d-flex flex-column"> |
|
|
<h1 |
|
|
style={{ |
|
|
color: props.data.status === 1 ? "#00CC69" : "#4D4D4F", |
|
|
}} |
|
|
> |
|
|
{props.data.firstName + " " + props.data.lastName} |
|
|
</h1> |
|
|
<div |
|
|
style={{ |
|
|
color: props.data.status === 1 ? "#00CC69" : "#4D4D4F", |
|
|
}} |
|
|
> |
|
|
{props.data.title} |
|
|
</div> |
|
|
</div> |
|
|
{props.data.status === 1 ? ( |
|
|
<div style={{ position: "absolute", left: 24, top: 16 }}> |
|
|
<CheckIcon style={{ fontSize: 40, color: "#00CC69" }} /> |
|
|
</div> |
|
|
) : null} |
|
|
</div> |
|
|
); |
|
|
};
|
|
|
|