54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
import { useState } from "react";
|
|
|
|
import Links from "./Links";
|
|
import HeadMd from "./HeadMd";
|
|
import HeadSm from "./HeadSm";
|
|
import { Button } from "@mui/material";
|
|
import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
|
|
|
|
function Sidebar({ active, setActive }) {
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<div className={`
|
|
transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] md:w-fit
|
|
${active ? ' right-0' : 'right-[-85%]'}
|
|
${open ? 'min-w-[243px]' : 'min-w-[96px]'}
|
|
`}>
|
|
<aside className={`
|
|
relative h-screen overflow-hidden
|
|
transition-all duration-500 w-[85%] md:w-fit
|
|
${active ? ' right-0' : 'right-[-85%]'}
|
|
${open ? 'w-[243px]' : 'w-[96px]'}
|
|
`}>
|
|
<div className={`
|
|
z-30
|
|
md:top-0 md:right-0 w-[85%] md:w-fit
|
|
${active ? ' right-0' : 'right-[-85%]'}
|
|
overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed
|
|
border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
|
|
transition-all duration-700
|
|
${open ? 'md:w-[243px]' : 'md:w-[96px]'}
|
|
`}>
|
|
<div className="w-full">
|
|
<HeadMd open={open} setOpen={setOpen} />
|
|
<HeadSm setActive={setActive} />
|
|
<Links open={open} />
|
|
</div>
|
|
<div className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? '!max-w-full' : '!max-w-0'}`}>
|
|
<Button
|
|
variant="text"
|
|
className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
|
|
>
|
|
<LogoutOrangeP />
|
|
خروج از حساب
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Sidebar |