fix(webapp): show series list nav link as active more reliably

Previously, the nav link was only active when the current URL was EXACTLY the same as the `href`, but we want it to be active for all list page URLs.
JoosepAlviste · Sep 24, 2023 · c2d3fbe · c2d3fbe
1 parent 8bbff2f
commit c2d3fbe
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/apps/webapp/src/components/Link/Link.tsx b/apps/webapp/src/components/Link/Link.tsx
@@ -11,22 +11,26 @@ import * as s from './Link.css'
 
 export type LinkProps = ComponentPropsWithoutRef<'a'> & {
   activeClass?: string
+  activeUrlPrefix?: string
   children: ReactNode
 }
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
-  { className, activeClass, ...rest },
+  { className, activeClass, activeUrlPrefix, ...rest },
   ref,
 ) {
   const pageContext = usePageContext()
 
+  const isActive = activeUrlPrefix
+    ? pageContext.urlPathname.startsWith(activeUrlPrefix)
+    : pageContext.urlPathname === rest.href
+
   return (
     <a
       className={classNames(
         s.link,
         {
-          [activeClass ?? '']:
-            activeClass && pageContext.urlPathname === rest.href,
+          [activeClass ?? '']: activeClass && isActive,
         },
         className,
       )}

diff --git a/apps/webapp/src/components/NavSidebar/NavSidebar.tsx b/apps/webapp/src/components/NavSidebar/NavSidebar.tsx
@@ -40,7 +40,10 @@ export const NavSidebar = ({ className }: NavSidebarProps) => {
                 className={s.navLink}
                 asChild
               >
-                <Link activeClass={s.navLinkIsActive}>
+                <Link
+                  activeClass={s.navLinkIsActive}
+                  activeUrlPrefix="/series/list"
+                >
                   <Icon name="series" size="l" label="Series" />
                 </Link>
               </NavigationMenu.Link>