|
|
|
|
@ -2,195 +2,137 @@ import React, { useState, useEffect } from "react"; |
|
|
|
|
import Avatar from "../../../../components/Avatar"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { useNavigate } from "react-router-dom"; |
|
|
|
|
import { publicApi, user, dialog } from "../../../../redux/actions"; |
|
|
|
|
|
|
|
|
|
import "./index.scss"; |
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
|
import logoutIcon from "./logout.svg"; |
|
|
|
|
import moon from "./moon.svg"; |
|
|
|
|
import sms from "./sms.svg"; |
|
|
|
|
import userEdit from "./user-edit.svg"; |
|
|
|
|
import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg"; |
|
|
|
|
import myVideosIcon from "./myVideos.svg"; |
|
|
|
|
import myBooksIcon from "./myBooks.svg"; |
|
|
|
|
import ordersIcon from "./orders.svg"; |
|
|
|
|
import favoritesIcon from "./favorites.svg"; |
|
|
|
|
import addressIcon from "./address.svg"; |
|
|
|
|
import { user, dialog } from "../../../../redux/actions"; |
|
|
|
|
|
|
|
|
|
const SidebarMenu = ({ |
|
|
|
|
profile, |
|
|
|
|
support, |
|
|
|
|
user, |
|
|
|
|
dashboardOptions, |
|
|
|
|
setDashboardOptions, |
|
|
|
|
page, |
|
|
|
|
setPage, |
|
|
|
|
logout, |
|
|
|
|
setDialog, |
|
|
|
|
isLogin, |
|
|
|
|
user, |
|
|
|
|
sidebar, |
|
|
|
|
}) => { |
|
|
|
|
const navigate = useNavigate(); |
|
|
|
|
const [toggleList, setToggleList] = useState({ |
|
|
|
|
profile: false, |
|
|
|
|
support: false, |
|
|
|
|
}); |
|
|
|
|
const [activeDropdown, setActiveDropdown] = useState(null); |
|
|
|
|
|
|
|
|
|
const Dropdown = ({ list, title, name, active, icon }) => { |
|
|
|
|
const actions = React.useMemo(() => { |
|
|
|
|
return { |
|
|
|
|
page: (val) => setPage(val), |
|
|
|
|
logout: () => |
|
|
|
|
setDialog({ |
|
|
|
|
text: window.t("میخوای تنهامون بذاری؟"), |
|
|
|
|
type: "confirm", |
|
|
|
|
accept: () => logout(), |
|
|
|
|
open: true, |
|
|
|
|
}), |
|
|
|
|
}; |
|
|
|
|
}, [user]); |
|
|
|
|
|
|
|
|
|
const Dropdown = React.useCallback(({item}) => { |
|
|
|
|
return ( |
|
|
|
|
<div className="flex flex-col"> |
|
|
|
|
<div |
|
|
|
|
className="flex justify-between items-center py-2 my-2 cursor-pointer group hover:bg-blueC0 hover:bg-opacity-10 rounded-md px-1" |
|
|
|
|
onClick={() => |
|
|
|
|
setToggleList({ ...toggleList, [name]: !toggleList[name] }) |
|
|
|
|
} |
|
|
|
|
className={`flex justify-between items-center py-2 my-2 cursor-pointer group ${ |
|
|
|
|
page === item?.name |
|
|
|
|
? "bg-green-600" |
|
|
|
|
: "hover:bg-blueC0 hover:bg-opacity-10" |
|
|
|
|
} rounded-md px-1`}
|
|
|
|
|
onClick={() => { |
|
|
|
|
if (item?.menu?.length <= 1) { |
|
|
|
|
if (item?.name === "logout") { |
|
|
|
|
actions['logout'](); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (item?.name === "dark") { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
actions['page'](item?.name); |
|
|
|
|
} else { |
|
|
|
|
setActiveDropdown(item?.name); |
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div className="flex items-center"> |
|
|
|
|
<img src={icon} alt="" className="ml-2 w-6 mb-1" /> |
|
|
|
|
<strong className="font-semibold text-tiny text-green7B"> |
|
|
|
|
{title} |
|
|
|
|
<img |
|
|
|
|
src={item?.icon + (item?.name === page ? "-white.svg" : "-primary.svg")} |
|
|
|
|
alt="" |
|
|
|
|
className="ml-2 w-6 mb-1" |
|
|
|
|
/> |
|
|
|
|
<strong |
|
|
|
|
className={`font-semibold text-tiny ${ |
|
|
|
|
item?.name === page ? "text-white" : "text-green7B" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
{item?.title} |
|
|
|
|
</strong> |
|
|
|
|
</div> |
|
|
|
|
<img |
|
|
|
|
src={dropdownIcon} |
|
|
|
|
alt="" |
|
|
|
|
className={`w-4 transform transition-all ${ |
|
|
|
|
toggleList[name] ? "rotate-180" : "" |
|
|
|
|
}`}
|
|
|
|
|
/> |
|
|
|
|
{item?.menu?.length > 1 ? ( |
|
|
|
|
<img |
|
|
|
|
src={"/assets/icons/dropdown-primary.svg"} |
|
|
|
|
alt="" |
|
|
|
|
className={`w-4 transform transition-all ${ |
|
|
|
|
activeDropdown === item?.name ? "rotate-180" : "" |
|
|
|
|
}`}
|
|
|
|
|
/> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
<ul |
|
|
|
|
className={`list-none p-0 mb-0 mt-0 mx-0 flex overflow-x-hidden flex-col transition-all`} |
|
|
|
|
style={{ |
|
|
|
|
maxHeight: !toggleList[name] ? 0 : "calc(100vh)", |
|
|
|
|
overflowY: !toggleList[name] ? "hidden" : "", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{list.map((item, index) => ( |
|
|
|
|
<li |
|
|
|
|
key={index} |
|
|
|
|
className={`flex items-center cursor-pointer rounded-md hover:bg-gray-100`} |
|
|
|
|
onClick={() => (page !== item.value ? setPage(item.value) : {})} |
|
|
|
|
> |
|
|
|
|
<span |
|
|
|
|
className={`text-tiny font-medium py-2 my-1 px-4 rounded-full ${ |
|
|
|
|
page === item.value |
|
|
|
|
? "text-white bg-green-600" |
|
|
|
|
: "text-gray70" |
|
|
|
|
}`}
|
|
|
|
|
{item?.menu?.length > 1 ? ( |
|
|
|
|
<ul |
|
|
|
|
className={`list-none p-0 mb-0 mt-0 mx-0 flex overflow-hidden flex-col transition-all ${ |
|
|
|
|
item?.name === activeDropdown ? "max-h-screen" : "max-h-0" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
{item?.menu.map((menuItem, index) => ( |
|
|
|
|
<li |
|
|
|
|
key={index} |
|
|
|
|
className={`flex items-center cursor-pointer rounded-md hover:bg-gray-100`} |
|
|
|
|
onClick={() => |
|
|
|
|
page !== menuItem.value ? setPage(menuItem.value) : {} |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
{item.title} |
|
|
|
|
</span> |
|
|
|
|
</li> |
|
|
|
|
))} |
|
|
|
|
</ul> |
|
|
|
|
<span |
|
|
|
|
className={`text-tiny font-medium py-2 my-1 px-4 rounded-full ${ |
|
|
|
|
page === menuItem?.value |
|
|
|
|
? "text-white bg-green-600" |
|
|
|
|
: "text-gray70" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
{menuItem?.title} |
|
|
|
|
</span> |
|
|
|
|
</li> |
|
|
|
|
))} |
|
|
|
|
</ul> |
|
|
|
|
) : null} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const buttons = [ |
|
|
|
|
{ |
|
|
|
|
icon: myBooksIcon, |
|
|
|
|
title: window.t("کتاب های من"), |
|
|
|
|
onClick: () => setPage("mybooks"), |
|
|
|
|
name: "mybooks", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: myVideosIcon, |
|
|
|
|
title: window.t("ویدئوهای من"), |
|
|
|
|
onClick: () => setPage("myvideos"), |
|
|
|
|
name: "myvideos", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: ordersIcon, |
|
|
|
|
title: window.t("سفارشات"), |
|
|
|
|
onClick: () => setPage("orders"), |
|
|
|
|
name: "orders", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: favoritesIcon, |
|
|
|
|
title: window.t("علاقمندی ها"), |
|
|
|
|
onClick: () => setPage("favorites"), |
|
|
|
|
name: "favorites", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: addressIcon, |
|
|
|
|
title: window.t("آدرس ها"), |
|
|
|
|
onClick: () => setPage("addresses"), |
|
|
|
|
name: "addresses", |
|
|
|
|
}, |
|
|
|
|
{ icon: moon, title: window.t("حالت شب"), onClick: () => {}, name: "dark" }, |
|
|
|
|
{ |
|
|
|
|
icon: logoutIcon, |
|
|
|
|
title: window.t("خروج از حساب کاربری"), |
|
|
|
|
// onClick: () => logout(),
|
|
|
|
|
onClick: () => |
|
|
|
|
setDialog({ |
|
|
|
|
text: window.t("میخوای تنهامون بذاری؟"), |
|
|
|
|
type: "confirm", |
|
|
|
|
accept: () => logout(), |
|
|
|
|
open: true, |
|
|
|
|
}), |
|
|
|
|
name: "logout", |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
},[page, activeDropdown]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (!isLogin) { |
|
|
|
|
if (!user) { |
|
|
|
|
navigate("/"); |
|
|
|
|
} |
|
|
|
|
}, [isLogin]); |
|
|
|
|
}, [user]); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
className="bg-gray-50 py-5 border-l-2 pl-4 pr-2 shadow-sm border-gray-300 border-solid overflow-y-scroll no-scrollbar divide-y divide-solid divide-gray-200" |
|
|
|
|
className="bg-gray-50 py-5 border-l-2 border-t-2 border-b-2 pl-4 pr-2 shadow-sm border-gray-300 border-solid overflow-y-scroll no-scrollbar divide-y divide-solid divide-gray-200" |
|
|
|
|
style={{ |
|
|
|
|
height: "calc(100vh - 80px)", |
|
|
|
|
height: "calc(100vh - 71px)", |
|
|
|
|
minWidth: 300, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{/* profile */} |
|
|
|
|
<div className="flex items-center mb-10"> |
|
|
|
|
<Avatar size={60} rounded={true} /> |
|
|
|
|
<p className="text-green7B font-bold text-base flex-1 mx-2"> |
|
|
|
|
{user.firstName === null ? "" : user.firstName + " " + user.lastName} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<Dropdown |
|
|
|
|
list={support.list} |
|
|
|
|
title={support.title} |
|
|
|
|
name={support.name} |
|
|
|
|
icon={support.icon} |
|
|
|
|
active={dashboardOptions.support} |
|
|
|
|
/> |
|
|
|
|
<Dropdown |
|
|
|
|
list={profile.list} |
|
|
|
|
title={profile.title} |
|
|
|
|
name={profile.name} |
|
|
|
|
icon={profile.icon} |
|
|
|
|
active={dashboardOptions.profile} |
|
|
|
|
/> |
|
|
|
|
{buttons.map((button, i) => ( |
|
|
|
|
<div |
|
|
|
|
className="flex flex-col item-center mb-0" |
|
|
|
|
onClick={() => button.onClick()} |
|
|
|
|
key={i} |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
className={`flex items-center cursor-pointer rounded-md py-0 my-3 px-1`} |
|
|
|
|
> |
|
|
|
|
<img src={button.icon} alt="" /> |
|
|
|
|
<strong |
|
|
|
|
className={`${ |
|
|
|
|
page === button.name |
|
|
|
|
? "text-white bg-green-600" |
|
|
|
|
: "text-green7B hover:bg-blueC0 hover:bg-opacity-10" |
|
|
|
|
} text-tiny mx-2 p-2 rounded-full`}
|
|
|
|
|
> |
|
|
|
|
{button.title} |
|
|
|
|
</strong> |
|
|
|
|
</div> |
|
|
|
|
{sidebar?.userInfo ? ( |
|
|
|
|
<div className="flex items-center mb-10"> |
|
|
|
|
<Avatar size={60} rounded={true} /> |
|
|
|
|
<p className="text-green7B font-bold text-base flex-1 mx-2"> |
|
|
|
|
{user.firstName === null |
|
|
|
|
? "" |
|
|
|
|
: user.firstName + " " + user.lastName} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|
{sidebar?.menu?.map((item, index) => ( |
|
|
|
|
<Dropdown item={item} key={index} /> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
@ -198,32 +140,12 @@ const SidebarMenu = ({ |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
user: state.user.status, |
|
|
|
|
dashboardOptions: state.publicApi.dashboardOptions, |
|
|
|
|
isLogin: state.user.status, |
|
|
|
|
sidebar: state.dashboard.sidebar, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
setDashboardOptions: publicApi.setDashboardOptions, |
|
|
|
|
logout: user.logout, |
|
|
|
|
setDialog: dialog.set, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(SidebarMenu); |
|
|
|
|
|
|
|
|
|
SidebarMenu.defaultProps = { |
|
|
|
|
profile: { |
|
|
|
|
name: "profile", |
|
|
|
|
icon: userEdit, |
|
|
|
|
title: window.t("حساب کاربری"), |
|
|
|
|
notification: null, |
|
|
|
|
list: [{ title: window.t("ویرایش حساب کاربری"), value: "profile" }], |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
support: { |
|
|
|
|
name: "support", |
|
|
|
|
icon: sms, |
|
|
|
|
title: window.t("پشتیبانی"), |
|
|
|
|
notification: null, |
|
|
|
|
list: [{ title: window.t("ثبت نظر"), value: window.t("setTicket") }], |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
|
Reza_ashrafi
2 years ago
