67 lines
2.3 KiB
JavaScript
67 lines
2.3 KiB
JavaScript
import Links from "./Links";
|
|
import HeadMd from "./HeadMd";
|
|
import HeadSm from "./HeadSm";
|
|
import { Button } from "@mui/material";
|
|
import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
|
|
import ModalLogout from "@/app/component/ModalLogout";
|
|
import { useState } from "react";
|
|
|
|
function Sidebar({ active, setActive, open, setOpen }) {
|
|
const [modal, setModal] = useState(false);
|
|
const handleOpen = () => setModal(true);
|
|
const handleClose = () => setModal(false);
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] hover-sidebar
|
|
${active ? " right-0" : "right-[-85%]"}
|
|
${open ? "min-w-[243px] md:w-[243px]" : "min-w-[92px] md:w-[92px]"}
|
|
`}
|
|
>
|
|
<aside
|
|
className={`
|
|
relative h-screen overflow-hidden
|
|
transition-all duration-500 w-[85%]
|
|
${active ? " right-0" : "right-[-85%]"}
|
|
${open ? "w-[243px]" : "w-[92px] hover:w-[243px]"}
|
|
`}
|
|
>
|
|
<div
|
|
className={`
|
|
z-30 md:top-0 md:right-0 w-[85%]
|
|
${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] dark:bg-[#222433]
|
|
transition-all duration-500 dark:border-transparent
|
|
${open ? "md:w-[243px]" : "md:w-[92px] hover:md:w-[243px]"}
|
|
`}
|
|
>
|
|
<div className="w-full">
|
|
<HeadMd open={open} setOpen={setOpen} />
|
|
<HeadSm setActive={setActive} />
|
|
<Links open={open} setActive={setActive} />
|
|
</div>
|
|
<div
|
|
className={`w-full flex logout-btn justify-center overflow-hidden transition-all duration-500 ${
|
|
open ? "!max-w-full" : "!max-w-[36px]"
|
|
}`}
|
|
>
|
|
<Button
|
|
variant="text"
|
|
onClick={handleOpen}
|
|
className="!flex !w-fit !items-center !justify-start !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
|
|
>
|
|
<LogoutOrangeP />
|
|
خروج از حساب
|
|
</Button>
|
|
<ModalLogout open={modal} handleClose={handleClose} />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Sidebar;
|