Indicate selected page

captbaritone · Jul 22, 2021 · 008055c · 008055c
1 parent e324d14
commit 008055c
Showing 1 changed file with 21 additions and 7 deletions.
diff --git a/nextjs/lib/components/Layout.js b/nextjs/lib/components/Layout.js
@@ -1,5 +1,6 @@
 import Head from "next/head";
 import Link from "next/link";
+import { useRouter } from "next/router";
 /* TODO
 <meta name="description" content="{% if page.summary %}{{ page.summary }}{% else %}{{ site.description }}{% endif %}">
 {% if page.categories %}<meta name="keywords" content="{{ page.categories | join: ', ' }}">{% endif %}
@@ -28,31 +29,31 @@ export default function Layout({ children, title }) {
       </Head>
       <div className="max-w-2xl mx-auto p-5">
         <nav className="flex justify-between flex-col sm:flex-row pb-5">
-          <div>
+          <div className="font-medium">
             <Link href="/">Jordan Eldredge</Link>
           </div>
           <ul className="flex">
             <li className="pr-5">
-              <Link href="/">About</Link>
+              <NavLink href="/">About</NavLink>
             </li>
             <li className="pr-5">
-              <Link href="/blog/">Blog</Link>
+              <NavLink href="/blog/">Blog</NavLink>
             </li>
             {/*
             <li className="pr-5">
-              <Link href="/talks/">Talks</Link>
+              <NavLink href="/talks/">Talks</NavLink>
             </li>
 */}
             <li className="pr-5">
-              <Link href="/projects/">Projects</Link>
+              <NavLink href="/projects/">Projects</NavLink>
             </li>
             {/*
             <li className="pr-5">
-              <Link href="/singer/">Singer</Link>
+              <NavLink href="/singer/">Singer</NavLink>
             </li>
             */}
             <li>
-              <Link href="/contact/">Contact</Link>
+              <NavLink href="/contact/">Contact</NavLink>
             </li>
           </ul>
         </nav>
@@ -68,3 +69,16 @@ export default function Layout({ children, title }) {
     </>
   );
 }
+
+function NavLink({ href, children }) {
+  const router = useRouter();
+  const pathname = router.asPath;
+
+  const active = pathname.replace(/\/$/, "") === href.replace(/\/$/, "");
+
+  return (
+    <span className={active ? "underline" : ""}>
+      <Link href={href}>{children}</Link>
+    </span>
+  );
+}