35 lines
834 B
TypeScript
35 lines
834 B
TypeScript
import React from 'react';
|
|
|
|
import { Blur } from '@components/generic/Blur';
|
|
|
|
type DefaultAsideProps = JSX.IntrinsicElements['aside'];
|
|
|
|
interface DrawerProps extends DefaultAsideProps {
|
|
open: boolean;
|
|
permenant?: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const Drawer = ({
|
|
open,
|
|
permenant,
|
|
onClose,
|
|
children,
|
|
...props
|
|
}: DrawerProps): JSX.Element => {
|
|
return (
|
|
<>
|
|
{open && <Blur disableOnMd={true} onClick={onClose} />}
|
|
|
|
<aside
|
|
className={`transform top-0 left-0 bg-white dark:bg-secondaryDark shadow-md max-w-xs w-full border-r dark:border-gray-600 h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
|
|
permenant ? '' : 'absolute'
|
|
} ${open ? 'translate-x-0' : '-translate-x-full'}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</aside>
|
|
</>
|
|
);
|
|
};
|