import React from 'react';

export interface MenuProps {
    open?: boolean;
}
 
const Menu: React.FunctionComponent<MenuProps> = ({ children, open }) => {
    return (
        <div data-testid="menu">
            <div className={ `${open ? 'opacity-40' : 'opacity-0'} z-20 h-screen w-96 fixed top-0 right-0 transition-opacity duration-500 bg-gradient-to-r from-transparent to-black pointer-events-none` } />
            <div className={ `${open ? 'opacity-100 -translate-x-8' : 'opacity-0 translate-x-0'} z-30 flex flex-col space-y-4 p-4 py-12 fixed right-0 top-0 transform transition-all duration-500 h-full` }>
                { children }
            </div>
        </div>
    );
};
 
export default Menu;