update

src/App.js

@@ -82,7 +82,7 @@ function App() {
         {/* <AdvertisementDesign3 /> */}
         {/* <CourseChapter /> */}
         {/* <SidebarMenu /> */}
-        {/* <SidebarDesign2 /> */}
+        <SidebarDesign2 />
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart /> */}
         {/* <Design1 /> */}

src/components/ReactTable3/Buttons.js

@@ -2,15 +2,24 @@ import arrowIcon from './arrow-icon.svg';
 import more from './more.svg';
 import edit from './edit.svg';
 
+import { useState } from 'react';
+
 
 
 export function Buttons({  }) {
+  const [activeDetails, setActiveDetails] = useState(null);
     return (
-      <div className=" flex flex-row items-center">
-          <button className="flex flex-row items-center justify-around  p-2 rounded border">
+      <div className="flex flex-row items-center">
+          <button 
+            className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
+            onClick={ () => setActiveDetails(!activeDetails) }>
           جزیات
-          <img src={arrowIcon} alt="" className="w-3 cursor-pointer mr-2" />
+          <img src={arrowIcon} alt="" className={`w-3 cursor-pointer mr-2 ${activeDetails ? "rotate-60" : "rotate-90"}`} />
           </button>
+          <div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
+              <img src={edit} alt="" className="w-4" />
+          </div>
+          <img src={more} alt="" className="w-5 cursor-pointer rotate-90 mx-1" />
       </div>
     );
   }

src/components/ReactTable3/EditButtons.js

@@ -1,9 +1,12 @@
+import search from './search-normal.svg';
+
+
 export function EditButtons({  }) {
     return (
-      <div className="bg-red-600 flex flex-row items-center">
-          <button>جزیات</button>
-          <button>جزیات</button>
-          <button>جزیات</button>
+      <div className="flex flex-row items-center">
+        <div className="border border-blue-400 flex flex-col items-center justify-center p-1 rounded-sm bg-blue-200 bg-opacity-30">
+          <img src={search} alt="" className="w-6 cursor-pointer mr-2" />
+        </div>
       </div>
     );
   }

src/components/ReactTable3/search-normal.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="search-normal" transform="translate(-428 -188)">
+    <g id="Vector" transform="translate(430 190)" fill="none">
+      <path d="M19,9.5A9.5,9.5,0,1,1,9.5,0,9.5,9.5,0,0,1,19,9.5Z" stroke="none"/>
+      <path d="M 9.5 1.5 C 5.088789939880371 1.5 1.5 5.088789939880371 1.5 9.5 C 1.5 13.91121006011963 5.088789939880371 17.5 9.5 17.5 C 13.91121006011963 17.5 17.5 13.91121006011963 17.5 9.5 C 17.5 5.088789939880371 13.91121006011963 1.5 9.5 1.5 M 9.5 0 C 14.74670028686523 0 19 4.253290176391602 19 9.5 C 19 14.74670028686523 14.74670028686523 19 9.5 19 C 4.253290176391602 19 0 14.74670028686523 0 9.5 C 0 4.253290176391602 4.253290176391602 0 9.5 0 Z" stroke="none" fill="#65a9ff"/>
+    </g>
+    <path id="Vector-2" data-name="Vector" d="M2.552,3.252a.7.7,0,0,1-.49-.2L.2,1.192A.706.706,0,0,1,.2.2a.706.706,0,0,1,.99,0l1.86,1.86a.706.706,0,0,1,0,.99A.738.738,0,0,1,2.552,3.252Z" transform="translate(446.747 206.747)" fill="#65a9ff"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(452 212) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/Sidebar/SidebarDesign2/index.js

@@ -90,7 +90,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
                         alt=""
                         className={`${
                           activeDropdown === menuItem
-                            ? "rotate-60	"
+                            ? "rotate-60"
                             : "rotate-90"
                         } `}
                       />