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

src/App.js

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

src/components/SearchBox/index.js

@@ -3,10 +3,19 @@ import React, { useState } from "react";
 import search from "./search-normal.svg";
 import zarbedar from "./zarbedar-icon.svg";
 
-const SearchBox = ({ cancleIcon, searchIcon, placeholder, className }) => {
+const SearchBox = ({
+  cancleIcon,
+  searchIcon,
+  placeholder,
+  className,
+  searchBoxHolder,
+}) => {
   const [activeSearchBox, setActiveSearchBox] = useState(false);
+
   return (
-    <div className={`flex flex-row-reverse items-center relative`}>
+    <div
+      className={`${searchBoxHolder} flex flex-row-reverse items-center relative`}
+    >
       {activeSearchBox && (
         <img
           src={cancleIcon}
@@ -43,4 +52,6 @@ SearchBox.defaultProps = {
 
   className:
     "text-blue-400 bg-[#F9FBFF] placeholder-blue-300 border-[#B5D6FF] focus:border-blue-200 focus:ring-blue-200",
+
+  searchBoxHolder: "",
 };

src/components/Sidebar/SidebarDesign2/index.js

@@ -2,7 +2,8 @@
 
 import React, { useState } from "react";
 
-import "./index.scss";
+import Switch from "../../Switch";
+import SearchBox from "../../SearchBox";
 
 import downwardArrow from "./arrow-down.svg";
 import profilePic from "./profile-pic.svg";
@@ -17,55 +18,40 @@ import logout from "./logout.svg";
 import search from "./search-normal.svg";
 import notification from "./notification.svg";
 
-import Switch from "../../Switch";
-
 const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
   const [activeDropdown, setActiveDropdown] = useState(null);
 
   return (
     <div
-      className={`${className} w-fit bg-white p-5  shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative`}
+      className={`${className} w-fit bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar relative`}
     >
       {/* profile */}
       <div className="flex flex-row items-center">
-        <img src={profilePic} alt="" className="w-12 rounded-full" />
+        <img src={profilePic} alt="profile-pic" className="w-12 rounded-full" />
-        <div className="flex flex-col flex-1 mr-3">
+        <div className="flex flex-col flex-1 mx-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" />
+        <img src={downwardArrow} alt="arrow" className="w-5 cursor-pointer" />
       </div>
       {/* search box */}
-      <div className="flex flex-row-reverse items-center relative w-full my-6">
+      <SearchBox searchBoxHolder={"my-4"} />
-        <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}>
           <p className="text-xs text-blue-800 my-2">{item.title}</p>
           {/* menu items */}
           {item.menuItems.map((menuItem, index) => (
-            <div className="flex flex-col justify-center">
+            <div className="flex flex-col justify-center" key={index}>
               <div className="flex flex-row items-center">
                 {/* right active border */}
                 <div
-                  style={{}}
                   className={`absolute right-0  w-1 h-8 rounded transition duration-300 ease-linear ${
                     activeDropdown === menuItem ? "bg-blue-600" : ""
                   }`}
                 ></div>
                 {/* left content */}
                 <div
-                  key={index}
                   className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300
                       ${activeDropdown === menuItem ? "bg-blue-100" : ""}
                     `}
@@ -104,18 +90,12 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
                 menuItem.menuSubItems.map((menuSubItem, j) => (
                   <div
                     key={j}
-                    className="flex flex-row items-center w-10/12  transition duration-300 ease-linear"
+                    className="flex flex-row items-center transition duration-300 ease-linear"
                     style={{
                       transform: "translate(-8%,-10px)",
                     }}
                   >
-                    <div
+                    <div className=" transition duration-300 ease-linear text-gray-400 border-r-2 border-gray-300">
-                      className=" transition duration-300 ease-linear"
-                      style={{
-                        borderRight: "1px solid gray",
-                        color: "gray",
-                      }}
-                    >
                       -
                     </div>
                     <div