remove unnecessary code & enhance gray color over the app

src/layouts/app/HeaderMenuDrawer.tsx

@@ -5,6 +5,7 @@ import NextIcon from "components/Icons/NextIcon";
 import ProText from "components/ProText";
 import { useState } from "react";
 import { useAppSelector } from "redux/hooks";
+import { componentBackground, darkComponentBackground } from "ThemeConstants";
 import useHeaderMenu from "./hooks/useHeaderMenu";
 
 const {useBreakpoint} = Grid;
@@ -31,7 +32,6 @@ export default function HeaderMenuDrawer() {
   });
 
   const actionButtonStyle: React.CSSProperties = {
-    color: themeName === "dark" ? "white" : "#1f2937",
     height: 32, // isMobile ? 44 : 40,
     minWidth: 32, //isMobile ? 44 : "auto",
     width: 32, //isMobile ? 44 : "auto",
@@ -40,6 +40,7 @@ export default function HeaderMenuDrawer() {
     alignItems: "center",
     justifyContent: "center",
     gap: isMobile ? 0 : 8,
+    backgroundColor: "none",
   };
 
   return (
@@ -52,7 +53,7 @@ export default function HeaderMenuDrawer() {
           zIndex: 999,
           [isRTL ? "left" : "right"]: 0,
           top: "30%",
-          backgroundColor: themeName === "dark" ? "#111827" : "#FFF",
+          backgroundColor: themeName === "dark" ? darkComponentBackground : componentBackground,
           [isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
           [isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
           border:

src/layouts/app/SideNav.tsx

@@ -1,68 +0,0 @@
-import { LoginOutlined } from "@ant-design/icons";
-import { ConfigProvider, Layout, Menu, SiderProps } from "antd";
-import { useEffect, useRef, useState } from "react";
-import { useLocation } from "react-router-dom";
-import { COLOR } from "ThemeConstants";
-import useSidebarItems from "./useSidebarItems";
-
-const { Sider } = Layout;
-type SideNavProps = SiderProps;
-
-const SideNav = ({ ...others }: SideNavProps) => {
-  const nodeRef = useRef(null);
-  const { pathname } = useLocation();
-  const [current, setCurrent] = useState("");
-
-  useEffect(() => {
-    const paths = pathname.split("/");
-    setCurrent(paths[paths.length - 1]);
-  }, [pathname]);
-
-  const items = useSidebarItems();
-
-  return (
-    <Sider
-      ref={nodeRef}
-      collapsedWidth={105}
-      breakpoint="lg"
-      trigger={null}
-      collapsed={true}
-      {...others}
-      style={{ background: "#FFF", overflow: "hidden" }}
-      className="side-container"
-    >
-      <LoginOutlined
-        color="blue"
-        // asLink
-        // href={PATHS.menu}
-        // justify="center"
-        // gap="small"
-        // imgSize={{ h: 105, w: 105 }}
-        // style={{ padding: "1rem 0" }}
-        // src="/sidebar-logo.jpg"
-      />
-      <ConfigProvider
-        theme={{
-          components: {
-            Menu: {
-              itemBg: "none",
-              itemSelectedBg: COLOR["100"],
-              itemHoverBg: COLOR["50"],
-              itemSelectedColor: COLOR["600"],
-            },
-          },
-        }}
-      >
-        <Menu
-          mode="inline"
-          items={items}
-          selectedKeys={[current]}
-          style={{ border: "none" }}
-          className="sidebar-menu-container"
-        />
-      </ConfigProvider>
-    </Sider>
-  );
-};
-
-export default SideNav;