ui: highlight active nav item

ui/app/(app)/layout.tsx

@@ -4,6 +4,7 @@ import { Suspense } from "react";
 
 import "../(marketing)/marketing.css";
 import DonateModal from "../../components/donate-modal";
+import NavLink from "../../components/nav-link";
 import { logoutAction } from "./dashboard/actions";
 
 export default function AppLayout({
@@ -30,10 +31,10 @@ export default function AppLayout({
           </Link>
         </div>
         <nav className="nav">
-          <Link href="/invoice">Check Invoice</Link>
-          <Link href="/docs">Documentation</Link>
-          <Link href="/faq">FAQ</Link>
-          <Link href="/dashboard">Dashboard</Link>
+          <NavLink href="/invoice">Check Invoice</NavLink>
+          <NavLink href="/docs">Documentation</NavLink>
+          <NavLink href="/faq">FAQ</NavLink>
+          <NavLink href="/dashboard">Dashboard</NavLink>
           <form action={logoutAction}>
             <button type="submit">Log out</button>
           </form>

ui/app/(marketing)/layout.tsx

@@ -6,6 +6,7 @@ import { cookies } from "next/headers";
 import "./marketing.css";
 import DonateModal from "../../components/donate-modal";
 import LoginModal, { LoginTrigger } from "../../components/login-modal";
+import NavLink from "../../components/nav-link";
 import { logoutAction } from "../(app)/dashboard/actions";
 
 export default async function MarketingLayout({
@@ -42,13 +43,13 @@ export default async function MarketingLayout({
           </Link>
         </div>
         <nav className="nav">
-          <Link href="/invoice">Check Invoice</Link>
-          <Link href="/tour">Tour</Link>
-          <Link href="/docs">Documentation</Link>
-          <Link href="/faq">FAQ</Link>
+          <NavLink href="/invoice">Check Invoice</NavLink>
+          <NavLink href="/tour">Tour</NavLink>
+          <NavLink href="/docs">Documentation</NavLink>
+          <NavLink href="/faq">FAQ</NavLink>
           {isAuthenticated ? (
             <>
-              <Link href="/dashboard">Dashboard</Link>
+              <NavLink href="/dashboard">Dashboard</NavLink>
               <form action={logoutAction}>
                 <button type="submit">Log out</button>
               </form>

ui/app/(marketing)/marketing.css

@@ -266,6 +266,24 @@ a {
   opacity: 1;
 }
 
+.nav a[aria-current="page"] {
+  opacity: 1;
+  font-weight: 600;
+  position: relative;
+}
+
+.nav a[aria-current="page"]::after {
+  content: "";
+  position: absolute;
+  left: -0.15rem;
+  right: -0.15rem;
+  bottom: -0.35rem;
+  height: 0.2rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--clay), var(--sage));
+  opacity: 0.65;
+}
+
 .hero {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

ui/components/nav-link.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+function normalizePath(path: string) {
+  if (!path.startsWith("/")) {
+    return `/${path}`;
+  }
+
+  if (path === "/") {
+    return "/";
+  }
+
+  return path.replace(/\/+$/, "");
+}
+
+export default function NavLink({
+  href,
+  children,
+  className,
+  exact,
+}: {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+  exact?: boolean;
+}) {
+  const pathname = usePathname() ?? "/";
+  const currentPath = normalizePath(pathname);
+  const targetPath = normalizePath(href);
+
+  const isActive = exact
+    ? currentPath === targetPath
+    : currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
+
+  return (
+    <Link
+      href={href}
+      className={className}
+      aria-current={isActive ? "page" : undefined}
+      data-active={isActive ? "true" : undefined}
+    >
+      {children}
+    </Link>
+  );
+}