|
|
import React, { useState } from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
import { publicApi, dialog, user } from "../../redux/actions"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import Drawer from "react-modern-drawer"; |
|
|
|
|
|
//assets |
|
|
import homeIcon from "./home.svg"; |
|
|
import homeDarkIcon from "./home-dark.svg"; |
|
|
import logoutIcon from "./logout.svg"; |
|
|
import logoutDarkIcon from "./logout-dark.svg"; |
|
|
import dangerIcon from "./mobile-danger.svg"; |
|
|
import dangerDarkIcon from "./mobile-danger-dark.svg"; |
|
|
import activationIcon from "./activation.svg"; |
|
|
import activationDarkIcon from "./activation-dark.svg"; |
|
|
import contactIcon from "./contact.svg"; |
|
|
import contactDarkIcon from "./contact-dark.svg"; |
|
|
import ordersIcon from "./orders.svg"; |
|
|
import ordersDarkIcon from "./orders-dark.svg"; |
|
|
import arIcon from "./AR.svg"; |
|
|
import arDarkIcon from "./AR-dark.svg"; |
|
|
import cartIcon from "./mobile-basket.svg"; |
|
|
import cartDarkIcon from "./mobile-basket-dark.svg"; |
|
|
import faqIcon from "./faq.svg"; |
|
|
import faqDarkIcon from "./faq-dark.svg"; |
|
|
|
|
|
import arrowLeftVideo from "../../assets/icons/dropdown-white.svg"; |
|
|
import sunIcon from "./sun.svg"; |
|
|
import moonIcon from "./moon.svg"; |
|
|
|
|
|
//components |
|
|
import Avatar from "../../components/Avatar"; |
|
|
|
|
|
const MyDrawer = ({ |
|
|
setDrawerOpen, |
|
|
drawerOpen, |
|
|
isDark, |
|
|
user, |
|
|
changeDarkMode, |
|
|
setDialog, |
|
|
logout, |
|
|
}) => { |
|
|
const [addUserDropdown, setAddUserDropdown] = useState(false); |
|
|
const publicLink = [ |
|
|
{ |
|
|
name: window.t("صفحه اصلی"), |
|
|
link: "/", |
|
|
icon: ( |
|
|
<img |
|
|
src={homeIcon} |
|
|
className="opacity-50 dark:bg-white" |
|
|
alt={window.t("صفحه اصلی")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("ورود یا ثبت نام"), |
|
|
link: "/signup", |
|
|
icon: ( |
|
|
<img |
|
|
src={logoutIcon} |
|
|
className="opacity-50 dark:bg-white" |
|
|
alt={window.t("کتابهای من")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
{ |
|
|
name: window.t("پشتیبانی"), |
|
|
link: "/contact-us", |
|
|
icon: ( |
|
|
<img |
|
|
src={dangerIcon} |
|
|
className="opacity-50 dark:bg-white" |
|
|
alt={window.t("پشتیبانی")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
}, |
|
|
]; |
|
|
const privateLink = [ |
|
|
{ |
|
|
name: window.t("صفحه اصلی"), |
|
|
link: "/", |
|
|
icon: ( |
|
|
<img |
|
|
src={isDark ? homeDarkIcon : homeIcon} |
|
|
className="opacity-50" |
|
|
alt={window.t("صفحه اصلی")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
setDrawerOpen(false); |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
name: window.t("سبد خرید"), |
|
|
link: "/cart", |
|
|
icon: ( |
|
|
<img |
|
|
src={isDark ? cartDarkIcon : cartIcon} |
|
|
className="opacity-50" |
|
|
alt={window.t("سبد خرید")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
setDrawerOpen(false); |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
name: window.t("فعال سازی کتاب"), |
|
|
link: "/activation", |
|
|
icon: ( |
|
|
<img |
|
|
src={isDark ? activationDarkIcon : activationIcon} |
|
|
className="opacity-50" |
|
|
alt={window.t("فعال سازی کتاب")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
setDrawerOpen(false); |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
name: window.t("واقعیت افزوده"), |
|
|
link: "/ar", |
|
|
icon: ( |
|
|
<img |
|
|
src={isDark ? arDarkIcon : arIcon} |
|
|
className="opacity-50" |
|
|
alt={window.t("واقعیت افزوده")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
setDrawerOpen(false); |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
name: window.t("سفارشات"), |
|
|
link: "/orders", |
|
|
icon: ( |
|
|
<img |
|
|
src={isDark ? ordersDarkIcon : ordersIcon} |
|
|
className="opacity-50" |
|
|
alt={window.t("سفارشات")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
setDrawerOpen(false); |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
name: window.t("سوالات متداول"), |
|
|
link: "/faq", |
|
|
icon: ( |
|
|
<img |
|
|
src={isDark ? faqDarkIcon : faqIcon} |
|
|
className="opacity-50" |
|
|
alt={window.t("سوالات متداول")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
setDrawerOpen(false); |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
name: window.t("پشتیبانی"), |
|
|
link: "/contact", |
|
|
icon: ( |
|
|
<img |
|
|
src={isDark ? contactDarkIcon : contactIcon} |
|
|
className="opacity-50" |
|
|
alt={window.t("پشتیبانی")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
setDrawerOpen(false); |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
name: window.t("خروج از حساب کاربری"), |
|
|
link: "/", |
|
|
icon: ( |
|
|
<img |
|
|
src={isDark ? logoutDarkIcon : logoutIcon} |
|
|
className="opacity-50" |
|
|
alt={window.t("خروج از حساب کاربری")} |
|
|
/> |
|
|
), |
|
|
toast: "", |
|
|
message: "", |
|
|
onClick: () => { |
|
|
setDialog({ |
|
|
open: true, |
|
|
type: "confirm", |
|
|
accept: () => { |
|
|
logout(); |
|
|
}, |
|
|
text: window.t("قصد خروج از حساب کاربری رو داری؟"), |
|
|
}); |
|
|
setDrawerOpen(false); |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
|
|
|
return ( |
|
|
<Drawer |
|
|
open={drawerOpen} |
|
|
onClose={() => setDrawerOpen(() => !drawerOpen)} |
|
|
size={"80%"} |
|
|
direction="right" |
|
|
> |
|
|
<div |
|
|
className={`flex flex-col flex-1 h-full divide-y divide-solid divide-gray-200 dark:divide-gray-600 bg-white dark:bg-black dark:bg-opacity- ${ |
|
|
isDark ? "bg-dark" : "bg-white" |
|
|
}`} |
|
|
onClick={(e) => e.stopPropagation()} |
|
|
> |
|
|
<header |
|
|
className="flex flex-col justify-between h-1/6 pt-3 px-3 bg-green-500 dark:bg-blue90" |
|
|
style={{ minHeight: "calc(100vh / 6)" }} |
|
|
> |
|
|
<div className="flex justify-between"> |
|
|
<Avatar size={70} rounded={true} /> |
|
|
<img |
|
|
src={isDark ? sunIcon : moonIcon} |
|
|
className="w-8" |
|
|
alt="" |
|
|
onClick={() => changeDarkMode(!isDark)} |
|
|
/> |
|
|
</div> |
|
|
<div className="flex justify-between px-2 pb-3 mt-1"> |
|
|
<div className="flex flex-col"> |
|
|
<strong className="text-lg text-white"> |
|
|
{user && user?.firstName + " " + user?.lastName} |
|
|
</strong> |
|
|
<span className="text-xs mt-2 text-gray-100 dark:text-grayDB"> |
|
|
{user?.cellphone} |
|
|
</span> |
|
|
</div> |
|
|
<img |
|
|
src={arrowLeftVideo} |
|
|
alt="" |
|
|
className={`transform ${ |
|
|
addUserDropdown ? "rotate-90" : "-rotate-90" |
|
|
} cursor-pointer`} |
|
|
onClick={() => setAddUserDropdown(() => !addUserDropdown)} |
|
|
/> |
|
|
</div> |
|
|
</header> |
|
|
<ul |
|
|
className={`flex flex-col ${ |
|
|
addUserDropdown ? "h-20" : "h-0" |
|
|
} transition-all duration-500`} |
|
|
></ul> |
|
|
<ul className="h-full flex flex-col py-6 px-4 gap-6"> |
|
|
{(!user ? publicLink : privateLink).map((item, key) => ( |
|
|
<Link to={item.link} key={key} onClick={() => item.onClick()}> |
|
|
<div className="flex items-center"> |
|
|
{item.icon} |
|
|
<div className="text-gray70 text-tiny mr-5 dark:text-white"> |
|
|
{item.name} |
|
|
</div> |
|
|
{item.message && <div className="badge">{item.message}</div>} |
|
|
</div> |
|
|
</Link> |
|
|
))} |
|
|
</ul> |
|
|
</div> |
|
|
</Drawer> |
|
|
); |
|
|
}; |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
isDark: state.publicApi.isDark, |
|
|
user: state.user.status, |
|
|
}); |
|
|
|
|
|
const mapDispatchToProps = { |
|
|
changeDarkMode: publicApi.setIsDark, |
|
|
setDialog: dialog.set, |
|
|
logout: user.logout, |
|
|
}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(MyDrawer);
|
|
|
|