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.
 
 
 

303 lines
7.9 KiB

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