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

src/App.js

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

src/components/Sidebar/SidebarDesign2/index.js

@@ -24,30 +24,30 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
 
   return (
     <div
-      className={`${className} bg-white p-5  shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative`}
+      className={`${className} w-fit bg-white p-5  shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative`}
     >
       {/* profile */}
-      {/* <div className="flex flex-row items-center">
+      <div className="flex flex-row items-center">
-          <img src={profilePic} alt="" className="w-12 rounded-full" />
+        <img src={profilePic} alt="" className="w-12 rounded-full" />
-          <div className="flex flex-col flex-1 mr-3">
+        <div className="flex flex-col flex-1 mr-3">
-            <p className="text-blue-900 text-sm">{username}</p>
+          <p className="text-blue-900 text-sm">{username}</p>
-            <p className="text-blue-700 text-xs">{userJob}</p>
+          <p className="text-blue-700 text-xs">{userJob}</p>
-          </div>
+        </div>
-          <img src={downwardArrow} alt="" className="w-5 cursor-pointer" />
+        <img src={downwardArrow} alt="" className="w-5 cursor-pointer" />
-        </div> */}
+      </div>
       {/* search box */}
-      {/* <div className="flex flex-row-reverse items-center relative w-full my-6">
+      <div className="flex flex-row-reverse items-center relative w-full my-6">
-          <img
+        <img
-            src={search}
+          src={search}
-            alt=""
+          alt=""
-            className="w-5 h-5 absolute left-3 cursor-pointer"
+          className="w-5 h-5 absolute left-3 cursor-pointer"
-          />
+        />
-          <input
+        <input
-            type="text"
+          type="text"
-            placeholder="جستجو در منو کاربری..."
+          placeholder="جستجو در منو کاربری..."
-            className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300"
+          className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300"
-          />
+        />
-        </div> */}
+      </div>
       {/* items */}
       {items.map((item, i) => (
         <div className="flex flex-col item-center" key={i}>

src/components/Sidebar/SidebarMenu/index.js

@@ -79,7 +79,12 @@ const SidebarMenu = ({ items, buttons }) => {
               <p className="text-blue-600 text-sm flex-1 mx-2">
                 {button.title}
               </p>
-              {button.leftIcon}
+              {/* من اینجا ۲ حالت در نظر گرفتم که یا میتونه عکس باشه یا یک کامپوننت به این دلیل که اون سویییچ را داخل یک کامپوننت دیگه درست کردم برای همین یا میشه بهش کامپوننت بدیم به عکس */}
+              {button.component ? (
+                button.component
+              ) : (
+                <img src={button.leftIcon} alt="" />
+              )}
             </div>
           </div>
         ))}
@@ -150,7 +155,12 @@ SidebarMenu.defaultProps = {
   ],
 
   buttons: [
-    { icon: moon, title: "حالت شب", leftIcon: <Switch /> },
+    { icon: moon, title: "حالت شب", leftIcon: null, component: <Switch /> },
-    { icon: logout, title: "خروج از حساب کاربری", leftIcon: null },
+    {
+      icon: logout,
+      title: "خروج از حساب کاربری",
+      leftIcon: logout,
+      component: null,
+    },
   ],
 };