Navbar Links

Readme.md

Why an Array of links

There are times where you have got a navbar or a sidebar with a bunch of link items and custom styling for when the route is active.

Having an array of links makes it DRY. You don't have to needlessly repeat yourself especially when it comes to styling.

The above use case is one good example.

CustomLink.tsx

import type { ValidRoute } from "@/lib/types";
import { getActiveRoute } from "@/utils/getActiveRoute";
import Link from "next/link";
import { useRouter } from "next/router";

type CustomLinkProps = {
  href: ValidRoute;
  children: React.ReactNode;
};

const CustomLink = ({ href, children }: CustomLinkProps) => {
  const router = useRouter();
  const { id } = router.query;
  const { isActive } = getActiveRoute(href, id, router);
  return (
    <Link
      href={href}
      scroll={false}
      className={`font-normal relative text-base leading-[19px] text-black ${
        isActive
          ? "after:block after:content-[''] after:w-[101px] after:h-[2px] after:bg-pp-green after:absolute lg:after:top-[calc(100%+38px)] xl:after:top-[calc(100%+50px)] after:left-[-10%] after:right-0 after:bottom-0"
          : null
      }`}
    >
      {children}
    </Link>
  );
};

export { CustomLink };

Navlinks.tsx

import { Link } from "@/lib/types";
import { CustomLink } from "./customLink";
import { source } from "@lib/linkSource"

interface NavLinksProps {
  source: Link[];
}

const NavLinks = () => {
  return (
    <>
      {source.map((link) => (
        <li key={link.name}>
          <CustomLink href={link.href}>{link.name}</CustomLink>
        </li>
      ))}
    </>
  );
};

export { NavLinks };

source.ts

export const links: Link[] = [
  {
    href: "/",
    name: "Dashboard",
  },
  {
    href: "/marketplace",
    name: "Marketplace",
  },
  {
    href: "/portfolio",
    name: "Portfolio",
  }
];