Skip to content

Commit

Permalink
Merge pull request #13 from celestiaorg/hotfix/fix-logo-on-firefox
Browse files Browse the repository at this point in the history 
Fix logo on firefox
  • Loading branch information
@gabros20
gabros20 authored Jan 7, 2025
2 parents 39d4dc2 + c1707bb commit fb0d829
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 169 deletions.
6 changes: 6 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
# testing
/coverage

# codegpt
.codegpt
dist/

# next.js
/.next/
/out/
Expand Down Expand Up @@ -36,3 +40,5 @@ yarn-error.log*
next-env.d.ts

.env

.codegpt
320 changes: 151 additions & 169 deletions src/components/Nav/Nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

0 comments on commit fb0d829

Please sign in to comment.