How to make Active Links on color on navigation Next-intl
Unanswered
West African Lion posted this in #help-forum
West African LionOP
Hi guys, how im supoosed to make active link when navigating on my app. Ive tried the usual way to do it, but with next-intl, not all pathnames are the same depending on the language.
`
export default function Navigation() {
const params = useParams();
const pathname = usePathname();
const currentLocale = params.locale as "en" | "es" | "ar" | "fr";
const activeLinkClass = (internalPath: keyof typeof pathname) => {
const fullPath = getPathname({ href: internalPath, locale: currentLocale });
return pathname === fullPath ? "text-gold" : "text-current";
};
return (
<>
<div className=" h-32 w-full flex lg:bg-white justify-between lg:justify-around bg-black lg:pr-12 overflow-y-hidden">
<div className="w-full h-full hidden lg:flex justify-evenly">
<div className="flex items-center w-5/12">
<div className="flex text-xl w-full justify-evenly font-light">
<Link href="/">
<span className={activeLinkClass(formattedPath)}>Home</span>
</Link>
<Link href={`/${params.locale}/services`}>
<span className={activeLinkClass(formattedPath)}>Services</span>
</Link>
`