diff --git a/src/components/SubNavigationPills/index.tsx b/src/components/SubNavigationPills/index.tsx index 43210d007..fd8fad01c 100644 --- a/src/components/SubNavigationPills/index.tsx +++ b/src/components/SubNavigationPills/index.tsx @@ -32,8 +32,10 @@ const SubNavigationPills: FC = ({ links, parentPathBase, }) => { + console.log("parentPathBase: ", parentPathBase) const linksWithTitle = links.filter((link) => !!link.title) const activePillIndex = getActivePillIndex(linksWithTitle, parentPathBase) + console.log("activePillIndex: ", activePillIndex) const wrapperBorderColor = useColorModeValue("gray.100", "gray.700") return ( @@ -106,14 +108,23 @@ const renderPill = (pill: RouteProps, isActive = false) => ( const getPathMatches = (pills: RouteProps[], parentPathBase: string = "") => { const pathMatches: PathMatchResult[] = [] for (let i = 0; i < pills.length; i++) { + console.log("-----------------------") const { path, pathOverride } = pills[i] const location = window.location.pathname + console.log("location: ", location) + console.log( + "`${parentPathBase}/${pathOverride}`: ", + `${parentPathBase}/${pathOverride}` + ) + console.log("`${parentPathBase}/${path}`: ", `${parentPathBase}/${path}`) const resolved = resolvePath( pathOverride ? `${parentPathBase}/${pathOverride}` : `${parentPathBase}/${path}` ) + console.log("resolved: ", resolved) const match = matchPath({ path: resolved.pathname, end: true }, location) + console.log("match: ", match) pathMatches.push({ index: i, path, @@ -121,16 +132,20 @@ const getPathMatches = (pills: RouteProps[], parentPathBase: string = "") => { resolvedPath: resolved.pathname, match, }) + console.log("-----------------------") } return pathMatches } const getActivePillIndex = (pills: RouteProps[], parentPathBase: string) => { + console.log("active pill function start") const pathMatches = getPathMatches(pills, parentPathBase) + console.log("pathMatches: ", pathMatches) const matchedPaths = pathMatches.filter((_) => { return !!_.match }) - + console.log("matchedPaths: ", matchedPaths) + console.log("matchedPaths.length: ", matchedPaths.length) if (matchedPaths.length === 0) return undefined if (matchedPaths.length === 1) return matchedPaths[0].index @@ -143,6 +158,11 @@ const getActivePillIndex = (pills: RouteProps[], parentPathBase: string) => { } ) + console.log( + "matchedElementWithLongestPathnameBase: ", + matchedElementWithLongestPathnameBase + ) + return matchedElementWithLongestPathnameBase.index }