fix: fix sidebar link active state (#4)

* fix: fix sidebar link active state

* chore: deps

package.json

@@ -16,7 +16,7 @@
     "cf-release": "cd misc/cloudflare-workers && wrangler deploy"
   },
   "dependencies": {
-    "@hiogawa/react-server": "0.1.16",
+    "@hiogawa/react-server": "0.1.17",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "react-server-dom-webpack": "18.3.0-canary-14898b6a9-20240318"

src/app.css

@@ -195,15 +195,14 @@ body {
   float: right;
   color: #eeb004;
 }
-/* NOTE: use aria-current="page" for NavLink */
-#sidebar nav a[aria-current="page"] span {
+#sidebar nav a.active span {
   color: inherit;
 }
 
 i {
   color: #818181;
 }
-#sidebar nav a[aria-current="page"] i {
+#sidebar nav a.active i {
   color: inherit;
 }
 
@@ -236,7 +235,7 @@ i {
   background: #e3e3e3;
 }
 
-#sidebar nav a[aria-current="page"] {
+#sidebar nav a.active {
   background: hsl(224, 98%, 58%);
   color: white;
 }

src/routes/_client.tsx

@@ -1,14 +1,6 @@
 "use client";
 
-import { Link, useRouter } from "@hiogawa/react-server/client";
-
-export function NavLink(props: React.ComponentProps<typeof Link>) {
-  const pathname = useRouter((s) => s.location.pathname);
-  const match = pathname
-    .replaceAll(/\/*$/g, "/")
-    .startsWith(props.href.replaceAll(/\/*$/g, "/"));
-  return <Link {...props} aria-current={match ? "page" : undefined} />;
-}
+import { useRouter } from "@hiogawa/react-server/client";
 
 export function GlobalPendingOverlay() {
   const isPending = useRouter((s) => s.isPending || s.isActionPending);

src/routes/layout.tsx

@@ -2,7 +2,7 @@ import { Link, LinkForm } from "@hiogawa/react-server/client";
 import { getContacts } from "./_data";
 import { actionCreateNewContact } from "./_action";
 import type { LayoutProps } from "@hiogawa/react-server/server";
-import { GlobalPendingOverlay, NavLink } from "./_client";
+import { GlobalPendingOverlay } from "./_client";
 
 export default async function Layout(props: LayoutProps) {
   const q = new URLSearchParams(props.url.search).get("q");
@@ -47,9 +47,10 @@ export default async function Layout(props: LayoutProps) {
               <ul>
                 {contacts.map((contact) => (
                   <li key={contact.id}>
-                    {/* TODO: navlink not working on initial render? */}
-                    {/* NOTE: functional `className` prop cannot used for server/client boundary */}
-                    <NavLink href={`/contacts/${contact.id}`}>
+                    <Link
+                      href={`/contacts/${contact.id}`}
+                      activeProps={{ className: "active" }}
+                    >
                       {contact.first || contact.last ? (
                         <>
                           {contact.first} {contact.last}
@@ -58,7 +59,7 @@ export default async function Layout(props: LayoutProps) {
                         <i>No Name</i>
                       )}{" "}
                       {contact.favorite ? <span>★</span> : null}
-                    </NavLink>
+                    </Link>
                   </li>
                 ))}
               </ul>