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

master
mahdi 2 years ago
parent ed755eaa5c
commit 7a253f48b9
  1. 12
      src/components/Sidebar/SidebarDesign2/index.js
  2. 2
      src/components/Sidebar/SidebarMenu/index.js

@ -23,7 +23,7 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
return ( return (
<div <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 */} {/* profile */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
@ -90,16 +90,16 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
menuItem.menuSubItems.map((menuSubItem, j) => ( menuItem.menuSubItems.map((menuSubItem, j) => (
<div <div
key={j} 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={{ 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 className=" transition duration-300 ease-linear text-gray-400 border-r-2 border-gray-300">
- -
</div> </div>
<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)} onClick={() => setActiveDropdown(menuSubItem)}
> >
<p className="text-xs transition duration-300"> <p className="text-xs transition duration-300">
@ -125,10 +125,10 @@ const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
</div> </div>
))} ))}
{/* blue left border */} {/* blue left border */}
<div {/* <div
style={{ bottom: "15%" }} 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" 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> </div>
); );
}; };

@ -19,7 +19,7 @@ import Switch from "../../Switch";
const SidebarMenu = ({ items, buttons }) => { const SidebarMenu = ({ items, buttons }) => {
return ( return (
<section> <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 */} {/* profile */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<img src={profilePic} alt="" className="w-12 rounded-full" /> <img src={profilePic} alt="" className="w-12 rounded-full" />

Loading…
Cancel
Save