fix: highlight component in nav even on new sub pages

twilio-labs · Sep 20, 2023 · 2f270c7 · 2f270c7
1 parent 51372bc
commit 2f270c7
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 14 deletions.
diff --git a/packages/paste-website/src/components/site-wrapper/sidebar/SidebarAnchor.tsx b/packages/paste-website/src/components/site-wrapper/sidebar/SidebarAnchor.tsx
@@ -6,18 +6,26 @@ import {useLocationPathname} from '../../../utils/RouteUtils';
 
 interface SidebarAnchorProps {
   children: NonNullable<React.ReactNode>;
+  selected?: boolean;
   href: string;
   onClick?: () => void;
 }
 
-const SidebarAnchor: React.FC<React.PropsWithChildren<SidebarAnchorProps>> = ({children, href, onClick, ...props}) => {
+const SidebarAnchor: React.FC<React.PropsWithChildren<SidebarAnchorProps>> = ({
+  children,
+  href,
+  onClick,
+  selected,
+  ...props
+}) => {
   const pathname = useLocationPathname();
   const pathnameWithoutTrailingSlash = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+  const itemSelected = selected || pathnameWithoutTrailingSlash === href;
 
   return (
     <Link href={href} {...props} legacyBehavior passHref>
       {/* @ts-expect-error using nextjs passHref means that we can't satisfy the nav item href required prop */}
-      <SidebarNavigationItem onClick={onClick} selected={pathnameWithoutTrailingSlash === href}>
+      <SidebarNavigationItem onClick={onClick} selected={itemSelected}>
         {children}
       </SidebarNavigationItem>
     </Link>

diff --git a/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx b/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx
@@ -57,6 +57,7 @@ const NavigationDisclosure: React.FC<
 const SiteSidebarNavigation = (): JSX.Element => {
   // TODO: move to a server component in the App directory
   const navigationData = useNavigationContext();
+  const pathname = useLocationPathname();
 
   // take airtable feature data and mutate it into navigation data
   const {allPasteComponent, allPasteLayout, allPastePrimitive, allPastePattern, allPastePageTemplate} =
@@ -214,6 +215,7 @@ const SiteSidebarNavigation = (): JSX.Element => {
       >
         <SidebarAnchor href={SidebarCategoryRoutes.COMPONENTS}>Overview</SidebarAnchor>
         {filteredComponentSidebarItems.map(({name, slug}: {[key: string]: string}) => {
+          const selected = pathname.includes(`${SidebarCategoryRoutes.COMPONENTS}/${slug}`);
           if (name === 'Icon') {
             return (
               <NavigationDisclosure
@@ -249,8 +251,16 @@ const SiteSidebarNavigation = (): JSX.Element => {
                   })
                 }
               >
-                <SidebarAnchor href={`${SidebarCategoryRoutes.COMPONENTS}/combobox`}>Singleselect</SidebarAnchor>
-                <SidebarAnchor href={`${SidebarCategoryRoutes.COMPONENTS}/multiselect-combobox`}>
+                <SidebarAnchor
+                  href={`${SidebarCategoryRoutes.COMPONENTS}/combobox`}
+                  selected={pathname.includes(`${SidebarCategoryRoutes.COMPONENTS}/combobox`)}
+                >
+                  Singleselect
+                </SidebarAnchor>
+                <SidebarAnchor
+                  href={`${SidebarCategoryRoutes.COMPONENTS}/multiselect-combobox`}
+                  selected={pathname.includes(`${SidebarCategoryRoutes.COMPONENTS}/multiselect-combobox`)}
+                >
                   Multiselect
                 </SidebarAnchor>
               </NavigationDisclosure>
@@ -270,8 +280,18 @@ const SiteSidebarNavigation = (): JSX.Element => {
                   })
                 }
               >
-                <SidebarAnchor href={`${SidebarCategoryRoutes.COMPONENTS}/status-badge`}>Status Badge</SidebarAnchor>
-                <SidebarAnchor href={`${SidebarCategoryRoutes.COMPONENTS}/status-menu`}>Status Menu</SidebarAnchor>
+                <SidebarAnchor
+                  href={`${SidebarCategoryRoutes.COMPONENTS}/status-badge`}
+                  selected={pathname.includes(`${SidebarCategoryRoutes.COMPONENTS}/status-badge`)}
+                >
+                  Status Badge
+                </SidebarAnchor>
+                <SidebarAnchor
+                  href={`${SidebarCategoryRoutes.COMPONENTS}/status-menu`}
+                  selected={pathname.includes(`${SidebarCategoryRoutes.COMPONENTS}/status-menu`)}
+                >
+                  Status Menu
+                </SidebarAnchor>
               </NavigationDisclosure>
             );
           }
@@ -289,15 +309,23 @@ const SiteSidebarNavigation = (): JSX.Element => {
                   })
                 }
               >
-                <SidebarAnchor href={`${SidebarCategoryRoutes.COMPONENTS}/sidebar`}>Sidebar Container</SidebarAnchor>
-                <SidebarAnchor href={`${SidebarCategoryRoutes.COMPONENTS}/sidebar-navigation`}>
+                <SidebarAnchor
+                  href={`${SidebarCategoryRoutes.COMPONENTS}/sidebar`}
+                  selected={pathname.includes(`${SidebarCategoryRoutes.COMPONENTS}/sidebar`)}
+                >
+                  Sidebar Container
+                </SidebarAnchor>
+                <SidebarAnchor
+                  href={`${SidebarCategoryRoutes.COMPONENTS}/sidebar-navigation`}
+                  selected={pathname.includes(`${SidebarCategoryRoutes.COMPONENTS}/sidebar-navigation`)}
+                >
                   Sidebar Navigation
                 </SidebarAnchor>
               </NavigationDisclosure>
             );
           }
           return (
-            <SidebarAnchor href={`${SidebarCategoryRoutes.COMPONENTS}/${slug}`} key={slug}>
+            <SidebarAnchor selected={selected} href={`${SidebarCategoryRoutes.COMPONENTS}/${slug}`} key={slug}>
               {name}
             </SidebarAnchor>
           );
@@ -315,11 +343,14 @@ const SiteSidebarNavigation = (): JSX.Element => {
         }
       >
         <SidebarAnchor href={SidebarCategoryRoutes.PRIMITIVES}>Overview</SidebarAnchor>
-        {filteredPrimitives.map(({name, slug}: {[key: string]: string}) => (
-          <SidebarAnchor href={`${SidebarCategoryRoutes.PRIMITIVES}/${slug}`} key={slug}>
-            {name}
-          </SidebarAnchor>
-        ))}
+        {filteredPrimitives.map(({name, slug}: {[key: string]: string}) => {
+          const selected = pathname.includes(`${SidebarCategoryRoutes.PRIMITIVES}/${slug}`);
+          return (
+            <SidebarAnchor selected={selected} href={`${SidebarCategoryRoutes.PRIMITIVES}/${slug}`} key={slug}>
+              {name}
+            </SidebarAnchor>
+          );
+        })}
       </NavigationDisclosure>
       <NavigationDisclosure
         buttonText="Tokens"