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