update src/views/Dashboard/layouts/SidebarMenu/index.js

master
Reza_ashrafi 2 years ago
parent fab86aa933
commit f763cef073
  1. 170
      src/views/Dashboard/layouts/SidebarMenu/index.js

@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import Avatar from "../../../../components/Avatar";
import { connect } from "react-redux";
import { useNavigate } from "react-router-dom";
import { user, dialog } from "../../../../redux/actions";
import { user, dialog, publicApi } from "../../../../redux/actions";
const SidebarMenu = ({
page,
@ -11,6 +11,8 @@ const SidebarMenu = ({
setDialog,
user,
sidebar,
changeDarkMode,
isDark,
}) => {
const navigate = useNavigate();
const [activeDropdown, setActiveDropdown] = useState(null);
@ -25,87 +27,95 @@ const SidebarMenu = ({
accept: () => logout(),
open: true,
}),
dark: () => changeDarkMode(!isDark),
};
}, [user]);
}, [user, isDark]);
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 ${
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;
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 ${
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") {
actions["dark"]();
return;
}
actions["page"](item?.name);
} else {
setActiveDropdown(item?.name);
}
actions['page'](item?.name);
} else {
setActiveDropdown(item?.name);
}
}}
>
<div className="flex items-center">
<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 className="flex items-center">
<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>
{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>
{item?.menu?.length > 1 ? (
<img
src={"/assets/icons/dropdown-primary.svg"}
alt=""
className={`w-4 transform transition-all ${
activeDropdown === item?.name ? "rotate-180" : ""
<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) : {}
}
>
<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>
{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) : {}
}
>
<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>
);
},[page, activeDropdown]);
);
},
[page, activeDropdown, isDark]
);
useEffect(() => {
if (!user) {
@ -123,7 +133,15 @@ const SidebarMenu = ({
>
{sidebar?.userInfo ? (
<div className="flex items-center mb-10">
<Avatar size={60} rounded={true} />
<Avatar
source={
user?.picFileId
? `https://dnvn.ir/api/v1/file/${user?.picFileId}`
: null
}
size={60}
rounded={'rounded-full'}
/>
<p className="text-green7B font-bold text-base flex-1 mx-2">
{user.firstName === null
? ""
@ -141,11 +159,13 @@ const SidebarMenu = ({
const mapStateToProps = (state) => ({
user: state.user.status,
sidebar: state.dashboard.sidebar,
isDark: state.publicApi.isDark,
});
const mapDispatchToProps = {
logout: user.logout,
setDialog: dialog.set,
changeDarkMode: publicApi.setIsDark,
};
export default connect(mapStateToProps, mapDispatchToProps)(SidebarMenu);

Loading…
Cancel
Save