42 lines
1.3 KiB
JavaScript
42 lines
1.3 KiB
JavaScript
import Cards from "./Cards";
|
|
import Head from "./Head";
|
|
import List from "./List";
|
|
|
|
function Sidebar({
|
|
user,
|
|
value,
|
|
isTurnsDetails,
|
|
setIsTurnsDetails,
|
|
setValue,
|
|
isOpenSide,
|
|
setIsOpenSide,
|
|
}) {
|
|
return (
|
|
// ${open ? 'md:w-[39%]' : 'min-w-[80px]'}
|
|
<div
|
|
className={` md:block fixed md:relative flex-1 z-[7] w-full sm:bg-[#FAFAFA] sm:px-[24px] md:w-[32%] lg:w-[28%] bg-[#FAFAFA] padding-responsive transition-all duration-700 h-screen md:h-auto pt-[36px] md:pt-0 z-5 top-[48px] sm:top-[52px] md:top-0 md:px-0 ${isOpenSide ? "right-0" : "md:flex -right-full md:right-0"} `}
|
|
>
|
|
<aside
|
|
className="relative md:sticky top-0 h-fit md:top-[110px] lg:top-[calc(40px_+_58px_+_78px)] w-full"
|
|
>
|
|
<div
|
|
className=" pt-0 md:pt-[10px] pb-[26px] bg-[#FAFAFA] sm:bg-[#FAFAFA] md:bg-[#FFF] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] "
|
|
>
|
|
<Head user={user} />
|
|
<Cards user={user} />
|
|
<List
|
|
user={user}
|
|
value={value}
|
|
setValue={setValue}
|
|
setIsOpenSide={setIsOpenSide}
|
|
isTurnsDetails={isTurnsDetails}
|
|
setIsTurnsDetails={setIsTurnsDetails}
|
|
/>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Sidebar;
|