Add selected color to main nav menu

Author: abdonrd

src/app/NavMenu.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { GithubIcon } from '@/icons';
+import clsx from 'clsx/lite';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export function NavMenu() {
+  const pathname = usePathname();
+
+  return (
+    <ul className="flex flex-row gap-4">
+      <li>
+        <Button
+          asChild
+          variant="ghost"
+          className={clsx(
+            pathname.startsWith('/trackers') &&
+              'text-nav-menu-selected-foreground',
+          )}
+        >
+          <Link href="/trackers">Advantage trackers</Link>
+        </Button>
+      </li>
+      <li>
+        <Button
+          asChild
+          variant="ghost"
+          className={clsx(
+            pathname === '/participate' && 'text-nav-menu-selected-foreground',
+          )}
+        >
+          <Link href="/participate">Participate</Link>
+        </Button>
+      </li>
+      <li>
+        <Button asChild variant="ghost" size="icon">
+          <a
+            href="https://github.com/quantum-advantage-tracker/quantum-advantage-tracker.github.io"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <GithubIcon className="size-6" />
+          </a>
+        </Button>
+      </li>
+    </ul>
+  );
+}

src/app/globals.css

@@ -40,6 +40,9 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  /* TODO: Review these custom variables */
+  --color-nav-menu-selected-foreground: #24a148;
 }
 
 :root {

src/app/layout.tsx

@@ -1,8 +1,7 @@
-import { Button } from '@/components/ui/button';
-import { GithubIcon } from '@/icons';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import Link from 'next/link';
+import { NavMenu } from './NavMenu';
 
 import './globals.css';
 
@@ -30,29 +29,7 @@ export default function RootLayout(props: LayoutProps<'/'>) {
                 📐 Quantum Advantage Tracker
               </Link>
 
-              <ul className="flex flex-row gap-4">
-                <li>
-                  <Button asChild variant="ghost">
-                    <Link href="/trackers">Advantage trackers</Link>
-                  </Button>
-                </li>
-                <li>
-                  <Button asChild variant="ghost">
-                    <Link href="/participate">Participate</Link>
-                  </Button>
-                </li>
-                <li>
-                  <Button asChild variant="ghost" size="icon">
-                    <a
-                      href="https://github.com/quantum-advantage-tracker/quantum-advantage-tracker.github.io"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <GithubIcon className="size-6" />
-                    </a>
-                  </Button>
-                </li>
-              </ul>
+              <NavMenu />
             </div>
           </nav>
         </header>