From 5b6933994bfe77634b1a9448365155aac4a38074 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Mon, 18 Aug 2025 17:20:28 +1000
Subject: [PATCH] added mix blend mode for navbar

---
 src/components/ui/NavigationBar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/NavigationBar.tsx b/src/components/ui/NavigationBar.tsx
index c0b878d..b556c3c 100644
--- a/src/components/ui/NavigationBar.tsx
+++ b/src/components/ui/NavigationBar.tsx
@@ -161,7 +161,7 @@ export const HoverNavigation = ({
 										<AnimatePresence>
 											{hoveredIndex === idx && (
 												<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"
 													initial={{ opacity: 0 }}
 													animate={{
@@ -213,7 +213,7 @@ export const HoverNavigation = ({
 						<li key={item?.link}>
 							<a
 								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}
 							</a>
@@ -235,7 +235,7 @@ export const NavBarLink = ({
 	return (
 		<div
 			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,
 			)}
 		>