update App.js, src/components/ProductSalesAmount/Design2/index.js and src/components/Sidebar/SidebarMenu/index.js

src/App.js

@@ -165,7 +165,7 @@ function App() {
         {/* <Design2 /> */}
 
         <SidebarMenu />
-        <SidebarDesign2 />
+        {/* <SidebarDesign2 /> */}
 
         {/* <SidebarDesign2 className="w-1/5" /> */}
         {/* <TableDesign1 /> */}

src/components/Sidebar/SidebarMenu/index.js

@@ -19,29 +19,23 @@ import Switch from "../../Switch";
 const SidebarMenu = ({ items, buttons }) => {
   return (
     <section>
-      <div
-        style={{ width: "20%" }}
-        className="bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar"
-      >
+      <div className="w-fit bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar">
         {/* profile */}
         <div className="flex flex-row items-center">
           <img src={profilePic} alt="" className="w-12 rounded-full" />
-          <p className="text-blue-600 font-sansbold text-base flex-1 mr-2">
+          <p className="flex-1 text-base text-blue-600 font-sansbold mx-2">
             کامران کوهستانی شیرازی
           </p>
-          <img src={downwardArrow} alt="" className="w-5 cursor-pointer" />
+          <img src={downwardArrow} alt="arrow" className="w-4 cursor-pointer" />
         </div>
         {/* divider */}
-        <div className="border border-gray-200 mt-5"></div>
-        <p className="text-xs text-gray-400 my-4">منوی کاربری</p>
+        <div className="border border-gray-200 my-5"></div>
+        <p className="text-xs text-gray-400 mb-2">منوی کاربری</p>
         {/* items */}
-        {items.map((item, i) => (
-          <div className="flex flex-col item-center">
+        {items.map((item, index) => (
+          <div className="flex flex-col item-center" key={index}>
             {/* menu items */}
-            <div
-              key={i}
-              className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
-            >
+            <div className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2">
               <img src={item.icon} alt="" className="w-5 h-5" />
               <p className="text-blue-600 text-sm flex-1 mx-2">{item.title}</p>
               {item.notification && (
@@ -85,7 +79,7 @@ const SidebarMenu = ({ items, buttons }) => {
               <p className="text-blue-600 text-sm flex-1 mx-2">
                 {button.title}
               </p>
-              {button.leftIcon && <Switch />}
+              {button.leftIcon}
             </div>
           </div>
         ))}
@@ -156,7 +150,7 @@ SidebarMenu.defaultProps = {
   ],
 
   buttons: [
-    { icon: moon, title: "حالت شب", leftIcon: moon },
+    { icon: moon, title: "حالت شب", leftIcon: <Switch /> },
     { icon: logout, title: "خروج از حساب کاربری", leftIcon: null },
   ],
 };