import { PropsWithChildren, useReducer, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import style from './menu.module.css';

createPortal;

export function Menu({ children }: PropsWithChildren) {
	//

	const [isOpen, setMenuClosed] = useReducer(v => !v, false);

	return (
		<>
			<div className={`${style.burger} ${isOpen ? style.close : ''}`} onClick={() => setMenuClosed()}>
				<div className="line"></div>
				<div className="line"></div>
				<div className="line"></div>
			</div>
			<nav className={`${style.nav} ${isOpen ? style.menu_opened : ''}`}>{children}</nav>
			{createPortal(
				<div className={style.back} style={isOpen ? { zIndex: 5, opacity: 0.5 } : { zIndex: -1 }}></div>,
				document.body
			)}
		</>
	);
}