From 143ef7e86afddc24b524280f00ae982bad4e4ec9 Mon Sep 17 00:00:00 2001 From: chimpdev Date: Tue, 16 Apr 2024 04:23:50 +0300 Subject: [PATCH] Fix header link color issue while page loading --- client/app/components/Header/NotCollapsedHeader.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/app/components/Header/NotCollapsedHeader.jsx b/client/app/components/Header/NotCollapsedHeader.jsx index aecf1ddb..c623a0d7 100644 --- a/client/app/components/Header/NotCollapsedHeader.jsx +++ b/client/app/components/Header/NotCollapsedHeader.jsx @@ -41,8 +41,11 @@ export default function NotCollapsedHeader() { backgroundRef.current.style.left = `${x}px`; backgroundRef.current.style.width = `${w}px`; backgroundRef.current.style.opacity = 1; + activeLink.style.color = '#000000'; + document.querySelectorAll('header a[data-active="false"]').forEach(link => link.style.color = 'rgba(var(--text-primary))'); } else { backgroundRef.current.style.opacity = 0; + document.querySelectorAll('header a').forEach(link => link.style.color = 'rgba(var(--text-primary))'); } }, [pathname]); @@ -68,8 +71,7 @@ export default function NotCollapsedHeader() { key={index} className={cn( 'relative z-[10] px-3 py-1 rounded-xl text-base font-medium gap-x-1.5 items-center flex select-none', - link.disabled && 'pointer-events-none opacity-50', - pathname === link.href && 'text-black pointer-events-none' + link.disabled && 'pointer-events-none opacity-50' )} href={link.href} data-active={pathname === link.href}