From c1707bb1eb621c63aeb4c63fd5b92997a20805ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A1bor=20Tam=C3=A1s?= <t.gabor880312@gmail.com>
Date: Tue, 7 Jan 2025 12:13:50 +0100
Subject: [PATCH] Fix logo on firefox

---
 .gitignore                |   6 +
 src/components/Nav/Nav.js | 320 ++++++++++++++++++--------------------
 2 files changed, 157 insertions(+), 169 deletions(-)

diff --git a/.gitignore b/.gitignore
index 925ce471..1ccdbd22 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,10 @@
 # testing
 /coverage
 
+# codegpt
+.codegpt
+dist/
+
 # next.js
 /.next/
 /out/
@@ -36,3 +40,5 @@ yarn-error.log*
 next-env.d.ts
 
 .env
+
+.codegpt
\ No newline at end of file
diff --git a/src/components/Nav/Nav.js b/src/components/Nav/Nav.js
index dc5f2a60..79c061c4 100644
--- a/src/components/Nav/Nav.js
+++ b/src/components/Nav/Nav.js
@@ -14,183 +14,165 @@ import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
 import Image from "next/image";
 
 const Nav = () => {
-  const [hasScrolled, setHasScrolled] = useState(false);
-  const controls = useAnimation();
-  const {
-    setScrollIsLocked,
-    menuIsOpen,
-    setMenuIsOpen,
-    navHeights,
-    primaryNavRef,
-  } = useScrollPosition();
+	const [hasScrolled, setHasScrolled] = useState(false);
+	const controls = useAnimation();
+	const { setScrollIsLocked, menuIsOpen, setMenuIsOpen, navHeights, primaryNavRef } = useScrollPosition();
 
-  useEffect(() => {
-    const handleScroll = () => {
-      if (window.scrollY > 0) {
-        if (!hasScrolled) {
-          setHasScrolled(true);
-          controls.start({ backgroundColor: "#F6F6F6" });
-        }
-      } else {
-        if (hasScrolled) {
-          setHasScrolled(false);
-          controls.start({ backgroundColor: "rgba(255,255,255,0)" });
-        }
-      }
-    };
+	useEffect(() => {
+		const handleScroll = () => {
+			if (window.scrollY > 0) {
+				if (!hasScrolled) {
+					setHasScrolled(true);
+					controls.start({ backgroundColor: "#F6F6F6" });
+				}
+			} else {
+				if (hasScrolled) {
+					setHasScrolled(false);
+					controls.start({ backgroundColor: "rgba(255,255,255,0)" });
+				}
+			}
+		};
 
-    handleScroll();
-    window.addEventListener("scroll", handleScroll);
+		handleScroll();
+		window.addEventListener("scroll", handleScroll);
 
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, [hasScrolled, setHasScrolled, controls]);
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}, [hasScrolled, setHasScrolled, controls]);
 
-  useEffect(() => {
-    setScrollIsLocked(menuIsOpen);
-  }, [menuIsOpen, setScrollIsLocked]);
+	useEffect(() => {
+		setScrollIsLocked(menuIsOpen);
+	}, [menuIsOpen, setScrollIsLocked]);
 
-  return (
-    <>
-      <JumpNav />
-      <motion.header
-        initial={{ backgroundColor: "rgba(255,255,255,0)" }}
-        animate={controls}
-        className={`fixed top-0 left-0 w-full z-50`}
-        ref={primaryNavRef}
-      >
-        <Container size={"lg"} padding={false}>
-          <div
-            className={`relative w-full flex justify-between items-center py-6 z-50 filter px-4 md:px-10 ${
-              menuIsOpen ? "invert" : ""
-            } transition-all duration-300`}
-          >
-            <Link href={`/`}>
-              <Image
-                src={`/images/celestia-logo.svg`}
-                alt={`Celestia logo | Home`}
-                width={128}
-                height={32}
-                className={`w-full h-auto max-w-32`}
-                priority
-              />
-            </Link>
-            <PrimaryButton
-              onClick={() => setMenuIsOpen(!menuIsOpen)}
-              lightMode
-              className={"md:hidden"}
-            >
-              {menuIsOpen ? (
-                <>
-                  Close <span className={`sr-only`}>the main</span>
-                </>
-              ) : (
-                <>
-                  <span className={`sr-only`}>Open the main</span> menu
-                </>
-              )}
-            </PrimaryButton>
-            <DesktopNav />
-          </div>
-        </Container>
-      </motion.header>
-      <AnimatePresence>
-        {menuIsOpen && (
-          <motion.div
-            className={`bg-black text-white fixed top-0 left-0 h-screen w-screen z-40 pt-28 lg:pt-48`}
-            initial={{
-              opacity: 0,
-              scale: 1.5,
-              filter: "blur(10px)",
-            }}
-            animate={{
-              opacity: 1,
-              scale: 1,
-              filter: "blur(0px)",
-              transition: {
-                duration: 0.25,
-                ease: "easeOut",
-              },
-            }}
-            exit={{
-              opacity: 0,
-              scale: 1.5,
-              filter: "blur(10px)",
-              transition: {
-                duration: 0.35,
-                ease: "easeOut",
-              },
-            }}
-          >
-            <Container size={"xl"} className={`block md:flex md:gap-10 h-full`}>
-              <div
-                className={`w-full sm:w-3/5 md:w-1/2 lg:w-1/3 h-full overflow-y-scroll overflow-x-visible no-scrollbar px-4 md:px-10`}
-              >
-                {MenuData.map((item, index) => {
-                  return (
-                    <motion.div
-                      initial={{
-                        opacity: 0,
-                        scale: 1.1,
-                        x: -20,
-                        transformOrigin: "center left",
-                      }}
-                      animate={{
-                        opacity: 1,
-                        scale: 1,
-                        x: 0,
-                        transition: {
-                          duration: 0.25,
-                          delay: 0.25 + 0.07 * index,
-                          ease: "easeOut",
-                        },
-                      }}
-                      key={`menu-item-${index}`}
-                      className={`mb-10`}
-                    >
-                      {item.type === "dropdown" && (
-                        <MobileNavDropdown
-                          name={item.name}
-                          items={item.items}
-                        />
-                      )}
-                      {item.type === "link" && (
-                        <Link
-                          href={item.url}
-                          className="w-full text-white no-underline"
-                        >
-                          <MenuLabel>{item.name}</MenuLabel>
-                        </Link>
-                      )}
-                    </motion.div>
-                  );
-                })}
-              </div>
-            </Container>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </>
-  );
+	return (
+		<>
+			<JumpNav />
+			<motion.header
+				initial={{ backgroundColor: "rgba(255,255,255,0)" }}
+				animate={controls}
+				className={`fixed top-0 left-0 w-full z-50`}
+				ref={primaryNavRef}
+			>
+				<Container size={"lg"} padding={false}>
+					<div
+						className={`relative w-full flex justify-between items-center py-6 z-50 filter px-4 md:px-10 ${
+							menuIsOpen ? "invert" : ""
+						} transition-all duration-300`}
+					>
+						<Link href={`/`}>
+							<Image
+								src={`/images/celestia-logo.svg`}
+								alt={`Celestia logo | Home`}
+								width={128}
+								height={32}
+								className={`h-auto max-w-32`}
+								priority
+							/>
+						</Link>
+						<PrimaryButton onClick={() => setMenuIsOpen(!menuIsOpen)} lightMode className={"md:hidden"}>
+							{menuIsOpen ? (
+								<>
+									Close <span className={`sr-only`}>the main</span>
+								</>
+							) : (
+								<>
+									<span className={`sr-only`}>Open the main</span> menu
+								</>
+							)}
+						</PrimaryButton>
+						<DesktopNav />
+					</div>
+				</Container>
+			</motion.header>
+			<AnimatePresence>
+				{menuIsOpen && (
+					<motion.div
+						className={`bg-black text-white fixed top-0 left-0 h-screen w-screen z-40 pt-28 lg:pt-48`}
+						initial={{
+							opacity: 0,
+							scale: 1.5,
+							filter: "blur(10px)",
+						}}
+						animate={{
+							opacity: 1,
+							scale: 1,
+							filter: "blur(0px)",
+							transition: {
+								duration: 0.25,
+								ease: "easeOut",
+							},
+						}}
+						exit={{
+							opacity: 0,
+							scale: 1.5,
+							filter: "blur(10px)",
+							transition: {
+								duration: 0.35,
+								ease: "easeOut",
+							},
+						}}
+					>
+						<Container size={"xl"} className={`block md:flex md:gap-10 h-full`}>
+							<div
+								className={`w-full sm:w-3/5 md:w-1/2 lg:w-1/3 h-full overflow-y-scroll overflow-x-visible no-scrollbar px-4 md:px-10`}
+							>
+								{MenuData.map((item, index) => {
+									return (
+										<motion.div
+											initial={{
+												opacity: 0,
+												scale: 1.1,
+												x: -20,
+												transformOrigin: "center left",
+											}}
+											animate={{
+												opacity: 1,
+												scale: 1,
+												x: 0,
+												transition: {
+													duration: 0.25,
+													delay: 0.25 + 0.07 * index,
+													ease: "easeOut",
+												},
+											}}
+											key={`menu-item-${index}`}
+											className={`mb-10`}
+										>
+											{item.type === "dropdown" && <MobileNavDropdown name={item.name} items={item.items} />}
+											{item.type === "link" && (
+												<Link href={item.url} className='w-full text-white no-underline'>
+													<MenuLabel>{item.name}</MenuLabel>
+												</Link>
+											)}
+										</motion.div>
+									);
+								})}
+							</div>
+						</Container>
+					</motion.div>
+				)}
+			</AnimatePresence>
+		</>
+	);
 };
 
 const MenuLabel = ({ children }) => {
-  return (
-    <div className={`w-full flex justify-between items-center group shrink-0`}>
-      <h2 className={`text-4xl lg:text-6xl grow-1`}>{children}</h2>
-      <Icon
-        Icon={<ArrowLongSVG dark />}
-        hover
-        HoverIcon={<ArrowLongSVG dark />}
-        className={`shrink-0 grow-0`}
-        direction={`down-right`}
-        border
-        size={"md"}
-        dark
-      />
-    </div>
-  );
+	return (
+		<div className={`w-full flex justify-between items-center group shrink-0`}>
+			<h2 className={`text-4xl lg:text-6xl grow-1`}>{children}</h2>
+			<Icon
+				Icon={<ArrowLongSVG dark />}
+				hover
+				HoverIcon={<ArrowLongSVG dark />}
+				className={`shrink-0 grow-0`}
+				direction={`down-right`}
+				border
+				size={"md"}
+				dark
+			/>
+		</div>
+	);
 };
 
 export default Nav;