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

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}) => {
+  const Dropdown = React.useCallback(
-    return (
+    ({ item }) => {
-      <div className="flex flex-col">
+      return (
-        <div
+        <div className="flex flex-col">
-          className={`flex justify-between items-center py-2 my-2 cursor-pointer group ${
+          <div
-            page === item?.name
+            className={`flex justify-between items-center py-2 my-2 cursor-pointer group ${
-              ? "bg-green-600"
+              page === item?.name
-              : "hover:bg-blueC0 hover:bg-opacity-10"
+                ? "bg-green-600"
-          } rounded-md px-1`}
+                : "hover:bg-blueC0 hover:bg-opacity-10"
-          onClick={() => {
+            } rounded-md px-1`}
-            if (item?.menu?.length <= 1) {
+            onClick={() => {
-              if (item?.name === "logout") {
+              if (item?.menu?.length <= 1) {
-                actions['logout']();
+                if (item?.name === "logout") {
-                return;
+                  actions["logout"]();
-              }
+                  return;
-              if (item?.name === "dark") {
+                }
-                return false;
+                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 +
-          <div className="flex items-center">
+                  (item?.name === page ? "-white.svg" : "-primary.svg")
-            <img
+                }
-              src={item?.icon + (item?.name === page ? "-white.svg" : "-primary.svg")}
+                alt=""
-              alt=""
+                className="ml-2 w-6 mb-1"
-              className="ml-2 w-6 mb-1"
+              />
-            />
+              <strong
-            <strong
+                className={`font-semibold text-tiny ${
-              className={`font-semibold text-tiny ${
+                  item?.name === page ? "text-white" : "text-green7B"
-                item?.name === page ? "text-white" : "text-green7B"
+                }`}
-              }`}
+              >
-            >
+                {item?.title}
-              {item?.title}
+              </strong>
-            </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
+            <ul
-              src={"/assets/icons/dropdown-primary.svg"}
+              className={`list-none p-0 mb-0 mt-0 mx-0 flex overflow-hidden flex-col transition-all ${
-              alt=""
+                item?.name === activeDropdown ? "max-h-screen" : "max-h-0"
-              className={`w-4 transform transition-all ${
-                activeDropdown === item?.name ? "rotate-180" : ""
               }`}
-            />
+            >
+              {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 ${
+    [page, activeDropdown, isDark]
-              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]);
 
   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);