added mix blend mode for navbar

This commit is contained in:
liyunze 2025-08-18 17:20:28 +10:00
parent e0440aa4ca
commit 5b6933994b

View file

@ -161,7 +161,7 @@ export const HoverNavigation = ({
<AnimatePresence> <AnimatePresence>
{hoveredIndex === idx && ( {hoveredIndex === idx && (
<motion.span <motion.span
className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200" className="absolute inset-0 z-10 block h-full w-full rounded-3xl bg-neutral-200"
layoutId="hoverBackground" layoutId="hoverBackground"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ animate={{
@ -213,7 +213,7 @@ export const HoverNavigation = ({
<li key={item?.link}> <li key={item?.link}>
<a <a
href={item?.link} href={item?.link}
className="group relative block px-5 py-2 text-center lg:hidden" className="block px-5 py-2 text-center mix-blend-difference lg:hidden"
> >
{item.label} {item.label}
</a> </a>
@ -235,7 +235,7 @@ export const NavBarLink = ({
return ( return (
<div <div
className={cn( className={cn(
"relative z-20 h-fit w-full overflow-hidden rounded-2xl text-center transition-all ease-out group-hover:text-black", "relative z-20 h-fit w-full overflow-hidden rounded-2xl text-center mix-blend-difference transition-all ease-out",
className, className,
)} )}
> >