active nav link style

packages/website/app/modules/navigation/active-link.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+import type { PathPattern } from "react-router"
+import { useMatch } from "react-router"
+
+export function ActiveLink({
+  to,
+  children,
+}: {
+  to: string | PathPattern
+  children: (props: { active: boolean }) => ReactNode
+}) {
+  const match = useMatch(to)
+  return <>{children({ active: match != undefined })}</>
+}

packages/website/app/modules/navigation/main-navigation-menu.tsx

@@ -1,6 +1,7 @@
 import { Menu, Transition } from "@headlessui/react"
 import { MenuAlt4Icon } from "@heroicons/react/outline"
 import clsx from "clsx"
+import { ActiveLink } from "~/modules/navigation/active-link"
 import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
 import { Popper } from "~/modules/ui/popper"
 import { AppLink } from "./app-link"
@@ -39,8 +40,17 @@ export function MainNavigationMenu() {
               </Menu.Item>
               {guideLinks.map(({ link }) => (
                 <Menu.Item key={link.to}>
-                  {({ active }) => (
-                    <AppLink {...link} className={menuItemClass({ active })} />
+                  {(menuItem) => (
+                    <ActiveLink to={link.to}>
+                      {(activeLink) => (
+                        <AppLink
+                          {...link}
+                          className={menuItemClass({
+                            active: activeLink.active || menuItem.active,
+                          })}
+                        />
+                      )}
+                    </ActiveLink>
                   )}
                 </Menu.Item>
               ))}

packages/website/app/modules/navigation/main-navigation.tsx

@@ -12,7 +12,7 @@ export function MainNavigation() {
       </a>
       <div className="hidden md:flex gap-4">
         {mainLinks.map((link) => (
-          <AppLink {...link} key={link.to} className={linkClass} />
+          <AppLink {...link} key={link.to} className={linkClass()} />
         ))}
       </div>
       <div className="md:hidden">