echecsfrance/components/Hamburger.tsx

"use client";

import HamburgerMenu from "@/components/HamburgerMenu";
import { useState } from "react";

// TODO make hamburger menu slide in from the right instead of conditional rendering
const Hamburger = () => {
  const [menuVisible, setMenuVisible] = useState(false);
  return (
    <>
      {" "}
      <div className="space-y-2" onClick={() => setMenuVisible(!menuVisible)}>
        <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
        <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
        <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
      </div>
      {menuVisible && <HamburgerMenu />}
    </>
  );
};

export default Hamburger;