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

src/components/Sidebar/SidebarDesign2/index.js

@@ -23,7 +23,7 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
 
   return (
     <div
-      className={`${className} w-fit bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar relative`}
+      className={`${className} w-fit bg-white p-5 h-screen overflow-y-auto scrollYDesign shadow-sm border border-gray-300 rounded relative`}
     >
       {/* profile */}
       <div className="flex flex-row items-center">
@@ -90,16 +90,16 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
                 menuItem.menuSubItems.map((menuSubItem, j) => (
                   <div
                     key={j}
-                    className="flex flex-row items-center transition duration-300 ease-linear"
+                    className="flex w-10/12 flex-row items-center transition duration-300 ease-linear"
                     style={{
-                      transform: "translate(-8%,-10px)",
+                      transform: "translate(-11%,-9px)",
                     }}
                   >
                     <div className=" transition duration-300 ease-linear text-gray-400 border-r-2 border-gray-300">
                       -
                     </div>
                     <div
-                      className="flex  flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
+                      className="flex flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
                       onClick={() => setActiveDropdown(menuSubItem)}
                     >
                       <p className="text-xs transition duration-300">
@@ -125,10 +125,10 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
         </div>
       ))}
       {/* blue left border */}
-      <div
+      {/* <div
         style={{ bottom: "15%" }}
         className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"
-      ></div>
+      ></div> */}
     </div>
   );
 };

src/components/Sidebar/SidebarMenu/index.js

@@ -19,7 +19,7 @@ import Switch from "../../Switch";
 const SidebarMenu = ({ items, buttons }) => {
   return (
     <section>
-      <div className="w-fit bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar">
+      <div className="w-fit bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-auto scrollYDesign">
         {/* profile */}
         <div className="flex flex-row items-center">
           <img src={profilePic} alt="" className="w-12 rounded-full" />