Alihaghighattalab
33 lines
1.7 KiB
TypeScript
33 lines
1.7 KiB
TypeScript
import { FC } from "react"
|
|
import { SidebarInterface } from "../../../types"
|
|
import { sidebarItems } from "../../../utility/sidebar"
|
|
import { SidebarItem } from "./sidebar-item"
|
|
import { CloseCircle, LogoutCurve } from "iconsax-react"
|
|
|
|
type Props = {
|
|
setShow: (value: boolean) => void,
|
|
show: any,
|
|
}
|
|
|
|
export const SidebarMobile: FC<Props> = ({ setShow, show }) => {
|
|
const handleCloseSidebar = () => setShow(false)
|
|
return (
|
|
show && <div className="lg:hidden fixed top-0 left-full z-0 h-screen transition-transform -translate-x-full bg-auth-form w-max">
|
|
<div className="relative p-4 h-full">
|
|
<CloseCircle color="gray" variant="Bold" className="size-7 text-white absolute top-2 right-2" onClick={handleCloseSidebar} />
|
|
<div className="lg:hidden w-full h-full max-w-max p-[21px] flex flex-col gap-y-[44px] items-center xl:max-w-fit bg-secondry-color">
|
|
<img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
|
|
<div className="h-full flex flex-col justify-between">
|
|
<div className="flex flex-col gap-y-3">
|
|
{sidebarItems?.map((item: SidebarInterface) => <SidebarItem key={item?.name} item={item} />)}
|
|
</div>
|
|
<div className="w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52 cursor-pointer">
|
|
<LogoutCurve color="#777577" className="size-[27px]" />
|
|
<p className="font-normal text-base text-secondary-text-color">خروج</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |