themes and dimensions

components/Hamburger.tsx

@@ -0,0 +1,22 @@
+"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;