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 />
-        {/* <SidebarDesign2 /> */}
+        {/* <SidebarMenu /> */}
+        <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">
-          <img src={profilePic} alt="" className="w-12 rounded-full" />
-          <div className="flex flex-col flex-1 mr-3">
-            <p className="text-blue-900 text-sm">{username}</p>
-            <p className="text-blue-700 text-xs">{userJob}</p>
-          </div>
-          <img src={downwardArrow} alt="" className="w-5 cursor-pointer" />
-        </div> */}
+      <div className="flex flex-row items-center">
+        <img src={profilePic} alt="" className="w-12 rounded-full" />
+        <div className="flex flex-col flex-1 mr-3">
+          <p className="text-blue-900 text-sm">{username}</p>
+          <p className="text-blue-700 text-xs">{userJob}</p>
+        </div>
+        <img src={downwardArrow} alt="" className="w-5 cursor-pointer" />
+      </div>
       {/* search box */}
-      {/* <div className="flex flex-row-reverse items-center relative w-full my-6">
-          <img
-            src={search}
-            alt=""
-            className="w-5 h-5 absolute left-3 cursor-pointer"
-          />
-          <input
-            type="text"
-            placeholder="جستجو در منو کاربری..."
-            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 className="flex flex-row-reverse items-center relative w-full my-6">
+        <img
+          src={search}
+          alt=""
+          className="w-5 h-5 absolute left-3 cursor-pointer"
+        />
+        <input
+          type="text"
+          placeholder="جستجو در منو کاربری..."
+          className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300"
+        />
+      </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: logout, title: "خروج از حساب کاربری", leftIcon: null },
+    { icon: moon, title: "حالت شب", leftIcon: null, component: <Switch /> },
+    {
+      icon: logout,
+      title: "خروج از حساب کاربری",
+      leftIcon: logout,
+      component: null,
+    },
   ],
 };