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.
 
 
 

239 lines
7.2 KiB

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