feat: add NavLink with dynamic className support (#2539)

Co-authored-by: Priyankar Pal <[email protected]>

components/NavLink.tsx

@@ -0,0 +1,23 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { LinkProps } from "next/link";
+import { ReactNode } from "react";
+import { ComponentProps } from "react";
+
+type Props = LinkProps & Omit<ComponentProps<"a">,"className"> & {
+  className: string | ((active:boolean) => string);
+  children: ReactNode;
+}
+
+export const NavLink: React.FC<Props> = ({children,href,className,...rest}) => {
+  const activePath = usePathname();
+
+  const actualClass = typeof className === 'function' ? className(activePath === href || activePath === href + "/") : className;
+
+  return (
+    <Link href={href} {...rest} className={actualClass}>
+      {children}
+    </Link>
+  );
+};

components/Navbar.tsx

@@ -2,7 +2,7 @@
 import React, { Suspense } from "react";
 import { NextPage } from "next";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { NavLink } from "./NavLink";
 
 interface NavLink {
   name: string;
@@ -11,7 +11,6 @@ interface NavLink {
 }
 
 const Navbar: NextPage = () => {
-  const activePath = usePathname();
   const navLinks: NavLink[] = [
     {
       name: "Home",
@@ -55,32 +54,22 @@ const Navbar: NextPage = () => {
               {navLinks.map((navLink) => (
                 <li key={navLink.path}>
                   {navLink.external ? (
-                    <Link
+                    <NavLink
                       href={navLink.path}
                       aria-label="desktop navbar link"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className={
-                        activePath === navLink.path ||
-                          activePath === navLink.path + "/"
-                          ? "inline-block py-2 px-3 text-center text-primary hover:text-primary rounded-lg"
-                          : "inline-block py-2 px-3 text-center text-white hover:text-primary rounded-lg"
-                      }
+                      className={(active)=> active ? "inline-block py-2 px-3 text-center text-primary hover:text-primary rounded-lg" : "inline-block py-2 px-3 text-center text-white hover:text-primary rounded-lg"}
                     >
                       {navLink.name}
-                    </Link>
+                    </NavLink>
                   ) : (
-                    <Link
+                    <NavLink
                       href={navLink.path}
-                      className={
-                        activePath === navLink.path ||
-                          activePath === navLink.path + "/"
-                          ? "inline-block py-2 px-3 text-center text-primary hover:text-primary rounded-lg"
-                          : "inline-block py-2 px-3 text-center text-white hover:text-primary rounded-lg"
-                      }
+                      className={(active)=> active ? "inline-block py-2 px-3 text-center text-primary hover:text-primary rounded-lg" : "inline-block py-2 px-3 text-center text-white hover:text-primary rounded-lg"}
                     >
                       {navLink.name}
-                    </Link>
+                    </NavLink>
                   )}
                 </li>
               ))}