import "./styles.css";

import { useState } from "react";

import BurgerButton from "../BurgerButton";
import Navbar from "../Navbar";

const BurgerMenu = () => {
  const [checked, setChecked] = useState(false);

  const handleClick = () => {
    !checked
      ? (document.body.style.overflow = "hidden")
      : (document.body.style.overflow = "auto");
    setChecked(!checked);
  };

  return (
    <div className="burgerMenu">
      <BurgerButton checked={checked} onClick={handleClick} />
      <Navbar
        className={checked ? "animation" : ""}
        onClick={handleClick}
        handleClose={handleClick}
      />
    </div>
  );
};

export default BurgerMenu;
