diff --git a/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx b/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx index 0aaf3e127..4b26c7a48 100644 --- a/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx +++ b/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx @@ -22,7 +22,7 @@ const ToolSelectorNarrow: FC = (props: ToolSelectorNarr const toolPath: string = getPathFromRoute(toolRoute) const baseClass: string = 'tool-selector-narrow' - const isActive: boolean = isActiveRoute(useLocation().pathname, toolPath) + const isActive: boolean = isActiveRoute(useLocation().pathname, toolRoute) const activeIndicaterClass: string = `${baseClass}-${isActive ? '' : 'in'}active` const hasChildren: boolean = !!toolRoute.children.some(child => !!child.route && !isParamRoute(child.route)) diff --git a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx b/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx index e7cb78a9a..489578025 100644 --- a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx +++ b/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx @@ -26,7 +26,7 @@ const ToolSelectorWide: FC = (props: ToolSelectorWideProp const toolRoute: PlatformRoute = props.route const toolPath: string = getPathFromRoute(toolRoute) - const isActive: boolean = isActiveRoute(activePath, toolPath) + const isActive: boolean = isActiveRoute(activePath, toolRoute) const activeIndicatorClass: string = `tool-selector-wide-${isActive ? '' : 'in'}active` diff --git a/src-ts/lib/route-provider/platform-route.model.ts b/src-ts/lib/route-provider/platform-route.model.ts index feb3242e3..8505a49b0 100644 --- a/src-ts/lib/route-provider/platform-route.model.ts +++ b/src-ts/lib/route-provider/platform-route.model.ts @@ -1,6 +1,7 @@ import { FC, SVGProps } from 'react' export interface PlatformRoute { + alternativePaths?: Array children?: Array disabled?: boolean element: JSX.Element diff --git a/src-ts/lib/route-provider/route-context-data.model.ts b/src-ts/lib/route-provider/route-context-data.model.ts index f2f223e0c..59710d1f0 100644 --- a/src-ts/lib/route-provider/route-context-data.model.ts +++ b/src-ts/lib/route-provider/route-context-data.model.ts @@ -9,7 +9,7 @@ export interface RouteContextData { getPath: (routeTitle: string) => string getPathFromRoute: (route: PlatformRoute) => string getRouteElement: (route: PlatformRoute) => JSX.Element - isActiveRoute: (activePath: string, pathName: string, rootPath?: string) => boolean + isActiveRoute: (activePath: string, toolRoute: PlatformRoute) => boolean isRootRoute: (activePath: string) => boolean rootLoggedInRoute: string rootLoggedOutRoute: string diff --git a/src-ts/lib/route-provider/route.provider.tsx b/src-ts/lib/route-provider/route.provider.tsx index 28f5af758..2c5e1631a 100644 --- a/src-ts/lib/route-provider/route.provider.tsx +++ b/src-ts/lib/route-provider/route.provider.tsx @@ -40,7 +40,7 @@ export const RouteProvider: FC = (props: RouteProviderProps) getPath, getPathFromRoute, getRouteElement, - isActiveRoute: isActiveRoute(props.rootLoggedIn, props.rootLoggedOut), + isActiveRoute, isRootRoute: isRootRoute(props.rootLoggedIn, props.rootLoggedOut), rootLoggedInRoute: props.rootLoggedIn, rootLoggedOutRoute: props.rootLoggedOut, @@ -111,26 +111,11 @@ export const RouteProvider: FC = (props: RouteProviderProps) ) } -function isActivePath(activePath: string, pathName: string, rootPath?: string): boolean { - return activePath?.startsWith(pathName) - && (pathName !== rootPath || activePath === rootPath) -} - -function isActiveRoute(rootLoggedIn: string, rootLoggedOut: string): - (activePath: string, pathName: string, rootPath?: string) => boolean { - - return (activePath: string, pathName: string, rootPath?: string) => { - - let isActive: boolean = isActivePath(activePath, pathName, rootPath) - - // if this is the root logged in route, - // also check the root logged out route - if (!isActive && pathName.startsWith(rootLoggedIn)) { - isActive = isActivePath(activePath, rootLoggedOut) - } - - return isActive - } +function isActiveRoute(activePath: string, toolRoute: PlatformRoute): boolean { + return !!( + activePath?.startsWith(toolRoute.route) + || toolRoute.alternativePaths?.some(path => activePath?.startsWith(path)) + ) } function isRootRoute(rootLoggedIn: string, rootLoggedOut: string): diff --git a/src-ts/tools/work/work.routes.tsx b/src-ts/tools/work/work.routes.tsx index 2bab3e3b5..f8c1ecddf 100644 --- a/src-ts/tools/work/work.routes.tsx +++ b/src-ts/tools/work/work.routes.tsx @@ -30,6 +30,7 @@ export const workRoutes: Array = [ title: 'Logged Out Landing', }, { + alternativePaths: [selfServiceRootRoute], children: [ { element: ,