fix docs link active state

souporserious · May 15, 2024 · 7288e42 · 7288e42
1 parent 548c704
commit 7288e42
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/site/components/SiteLayout/NavigationLink.tsx b/site/components/SiteLayout/NavigationLink.tsx
@@ -4,13 +4,17 @@ import Link from 'next/link'
 
 export function NavigationLink({
   href,
+  activePathnames,
   children,
 }: {
   href: string
+  activePathnames?: string[]
   children: React.ReactNode
 }) {
   const currentPathname = usePathname()
-  const isCurrent = currentPathname.startsWith(href)
+  const isCurrent = activePathnames
+    ? activePathnames.some((pathname) => currentPathname.startsWith(pathname))
+    : currentPathname.startsWith(href)
 
   return (
     <Link

diff --git a/site/components/SiteLayout/SiteLayout.tsx b/site/components/SiteLayout/SiteLayout.tsx
@@ -32,7 +32,12 @@ export function SiteLayout({
             style={{ width: undefined, height: 'var(--font-size-body-1)' }}
           />
         </a>
-        <NavigationLink href="/docs/getting-started">Docs</NavigationLink>
+        <NavigationLink
+          href="/docs/getting-started"
+          activePathnames={['/docs', '/packages']}
+        >
+          Docs
+        </NavigationLink>
         <NavigationLink href="/changelog">Changelog</NavigationLink>
       </header>
       {sidebar}