fix: correct same level side navigation on breadcrumbs (#6710)

* fix: correct same level side navigation on breadcrumbs

* chore: add comment for matching route path handling

Author: tquocanvn

components/withBreadcrumbs.tsx

@@ -8,22 +8,19 @@ import { useClientContext, useMediaQuery, useSiteNavigation } from '@/hooks';
 import type { NavigationKeys } from '@/types';
 import { dashToCamelCase } from '@/util/stringUtils';
 
-const WithBreadcrumbs: FC = () => {
-  const { navigationItems, getSideNavigation } = useSiteNavigation();
+type WithBreadcrumbsProps = {
+  navKeys?: Array<NavigationKeys>;
+};
+
+const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
+  const { getSideNavigation } = useSiteNavigation();
   const { pathname } = useClientContext();
   const isMobileScreen = useMediaQuery('(max-width: 639px)');
 
   const maxLength = isMobileScreen ? 2 : 4;
 
   const getBreadrumbs = () => {
-    const [navigationKey] =
-      navigationItems.find(([, item]) => pathname.includes(item.link)) || [];
-
-    if (navigationKey === undefined) {
-      return [];
-    }
-
-    const navigationTree = getSideNavigation([navigationKey as NavigationKeys]);
+    const navigationTree = getSideNavigation(navKeys);
 
     const pathList = pathname
       .split('/')
@@ -34,9 +31,15 @@ const WithBreadcrumbs: FC = () => {
 
     // Reduce the pathList to a breadcrumbs array by finding each path in the current navigation layer,
     // updating the currentNode to the found node's items(next layer) for the next iteration.
-    return pathList.reduce((breadcrumbs, path) => {
+    return pathList.reduce((breadcrumbs, path, index) => {
       const nodeWithCurrentPath = currentNode.find(
-        ([nodePath]) => nodePath === path
+        ([nodePath, entry]) =>
+          nodePath === path &&
+          // Skip checking child path if it is the last path since there is no more child item inside
+          (index === pathList.length - 1 ||
+            entry.items.some(
+              ([childPath]) => childPath === pathList[index + 1]
+            ))
       );
 
       if (nodeWithCurrentPath) {

layouts/About.tsx

@@ -17,7 +17,7 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
 
       <WithMetaBar />
 
-      <WithBreadcrumbs />
+      <WithBreadcrumbs navKeys={['about', 'getInvolved']} />
     </ArticleLayout>
   </>
 );

layouts/Learn.tsx

@@ -22,7 +22,7 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
 
       <WithMetaBar />
 
-      <WithBreadcrumbs />
+      <WithBreadcrumbs navKeys={['learn']} />
     </ArticleLayout>
   </>
 );

navigation.json

@@ -92,11 +92,11 @@
           "link": "/about/governance",
           "label": "components.navigation.about.links.governance"
         },
-        "releases": {
+        "previousReleases": {
           "link": "/about/previous-releases",
           "label": "components.navigation.about.links.releases"
         },
-        "security": {
+        "securityReporting": {
           "link": "/about/security-reporting",
           "label": "components.navigation.about.links.security"
         }
@@ -113,7 +113,7 @@
           "link": "/about/get-involved/collab-summit",
           "label": "components.navigation.getInvolved.links.collabSummit"
         },
-        "upcomingEvents": {
+        "events": {
           "link": "/about/get-involved/events",
           "label": "components.navigation.getInvolved.links.upcomingEvents"
         },