Fix layout issues & co-locate components (#46)

* Fix layout issues & co-locate components * Fix front page * Fix centering
2026-07-23 04:26:57 +00:00 · 2023-07-04 13:26:25 +02:00
parent a9822b65fe
commit 75a6c74306
26 changed files with 306 additions and 305 deletions
@@ -0,0 +1,43 @@
+"use client";
+
+import HamburgerMenu from "./HamburgerMenu";
+import { useRef, useState } from "react";
+
+const Hamburger = () => {
+  const [menuVisible, setMenuVisible] = useState(false);
+  const hamburgerButtonRef = useRef<HTMLDivElement>(null);
+  return (
+    <>
+      <div
+        ref={hamburgerButtonRef}
+        className="hamburger-button relative z-[99999] space-y-2"
+        data-test="hamburger-button"
+        onClick={() => setMenuVisible(!menuVisible)}
+      >
+        <div
+          className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
+            menuVisible ? "translate-x-[1px] translate-y-2.5 rotate-45" : ""
+          }`}
+        ></div>
+        <div
+          className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white ${
+            menuVisible ? "rotate-0 scale-0 opacity-0" : ""
+          }`}
+        ></div>
+        <div
+          className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
+            menuVisible ? "-translate-y-2.5 -rotate-45" : ""
+          }`}
+        ></div>
+      </div>
+
+      <HamburgerMenu
+        menuVisible={menuVisible}
+        setMenuVisible={setMenuVisible}
+        hamburgerButtonRef={hamburgerButtonRef}
+      />
+    </>
+  );
+};
+
+export default Hamburger;