From d80dfaf4887bea30af0486d50fb44dca48b02ac1 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Wed, 4 May 2022 12:20:43 +0430
Subject: [PATCH] update App.js, src/components/Sidebar/SidebarDesign2/index.js
 and src/components/Sidebar/SidebarMenu/index.js

---
 src/App.js                                    |  4 +-
 .../Sidebar/SidebarDesign2/index.js           | 42 +++++++++----------
 src/components/Sidebar/SidebarMenu/index.js   | 16 +++++--
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5af4f85..92c847d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -164,8 +164,8 @@ function App() {
         {/* <Design1 /> */}
         {/* <Design2 /> */}
 
-        <SidebarMenu />
-        {/* <SidebarDesign2 /> */}
+        {/* <SidebarMenu /> */}
+        <SidebarDesign2 />
 
         {/* <SidebarDesign2 className="w-1/5" /> */}
         {/* <TableDesign1 /> */}
diff --git a/src/components/Sidebar/SidebarDesign2/index.js b/src/components/Sidebar/SidebarDesign2/index.js
index 35fe046..ff70640 100644
--- a/src/components/Sidebar/SidebarDesign2/index.js
+++ b/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}>
diff --git a/src/components/Sidebar/SidebarMenu/index.js b/src/components/Sidebar/SidebarMenu/index.js
index 9cd6fd7..38769aa 100644
--- a/src/components/Sidebar/SidebarMenu/index.js
+++ b/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,
+    },
   ],
 };