50 lines
1.2 KiB
TypeScript
Executable File
50 lines
1.2 KiB
TypeScript
Executable File
import React, { Fragment, FunctionComponent as FC } from "react";
|
|
import { Transition } from "@headlessui/react";
|
|
import classNames from "classnames";
|
|
|
|
type LeftColumnProps = {
|
|
children: React.ReactNode;
|
|
openLeftBar?: boolean;
|
|
widthElement?: number;
|
|
className?: string;
|
|
} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
|
|
|
|
const LeftColumn: React.FC<LeftColumnProps> = ({
|
|
className,
|
|
children,
|
|
widthElement = 0,
|
|
openLeftBar = false,
|
|
}): JSX.Element => {
|
|
const mdScreen = 768;
|
|
return (
|
|
<Transition
|
|
appear
|
|
as={Fragment}
|
|
show={widthElement < mdScreen ? openLeftBar : true}
|
|
enter={classNames(
|
|
widthElement < mdScreen ? "ease-in-out duration-150" : "transition-none"
|
|
)}
|
|
enterFrom="-translate-x-full"
|
|
enterTo="translate-x-0"
|
|
leave="ease-in-out duration-150"
|
|
leaveFrom="translate-x-0"
|
|
leaveTo="-translate-x-full"
|
|
>
|
|
<div
|
|
className={classNames(
|
|
"h-full left-bar",
|
|
{
|
|
"fixed inset-0 w-80": widthElement < mdScreen,
|
|
},
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</Transition>
|
|
);
|
|
};
|
|
|
|
LeftColumn.displayName = "LeftColumn";
|
|
export default LeftColumn;
|