antibland/rsc-active-nav

Active Nav with RSC

css_has_active_link.mov

We don't need to use client to achieve this. Let's do it with CSS :has

Note the id on main:

export default function Home() {
  return (
    <main
      id="home"
      className="flex min-h-screen flex-col items-center justify-between p-24 text-4xl"
    >
      <h1>Home</h1>
    </main>
  );
}

The following CSS will find the element with id="home and from the root match the sidebar link with the home href and color it red.

:has(#home) aside a[href="/"]
  color: red;
}