44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import clsx from "clsx";
|
|
import Button from "./ui/Button";
|
|
import CloseIcon from "./icons/CloseIcon";
|
|
import { usePopupStore } from "../stores/usePopupStore";
|
|
|
|
interface FloorSidebarProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
function FloorSidebar({
|
|
isOpen = false,
|
|
children,
|
|
onClose,
|
|
}: FloorSidebarProps) {
|
|
const { setPopup } = usePopupStore();
|
|
|
|
return (
|
|
<div
|
|
onScroll={() => setPopup(null)}
|
|
className={clsx(
|
|
"2xl:w-1/2 w-full h-full 2xl:max-h-full md:max-2xl:max-h-[calc(100%-24px)] max-h-[calc(100%-16px)] max-2xl:rounded-t-2xl overflow-y-auto absolute right-0 2xl:top-0 md:max-2xl:top-6 top-4 bg-white transition-transform duration-300 2xl:p-[1.667vw] p-6",
|
|
isOpen
|
|
? "2xl:translate-x-0 max-2xl:translate-y-0"
|
|
: "2xl:translate-x-full max-2xl:translate-y-full"
|
|
)}
|
|
>
|
|
{children}
|
|
<Button
|
|
onlyIcon
|
|
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw] md:max-2xl:top-6 md:max-2xl:right-6 top-4 right-4 !bg-[#F3F3F2]"
|
|
onClick={onClose}
|
|
>
|
|
<span className="2xl:size-[1.389vw] size-5 text-[#0D1922]">
|
|
<CloseIcon />
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FloorSidebar;
|