PROD-3115 #comment This commit attempts to implement the navigation handling #time 30m

Author: brooketopcoder

src-ts/header/Header.tsx

@@ -3,11 +3,13 @@ import {
     FC,
     MutableRefObject,
     SetStateAction,
+    useCallback,
     useContext,
     useEffect,
     useRef,
     useState,
 } from 'react'
+import { NavigateFunction, useNavigate } from 'react-router-dom'
 import classNames from 'classnames'
 
 import { EnvironmentConfig, PageSubheaderPortalId } from '../config'
@@ -35,6 +37,27 @@ const Header: FC = () => {
     const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const headerInit: MutableRefObject<boolean> = useRef(false)
     const navElementId: string = 'main-nav-el'
+    const navigate: NavigateFunction = useNavigate()
+
+    console.debug('active route', activeToolRoute)
+
+    const navigationHandler: (label: string, path: string) => void
+        = useCallback((label: string, path: string) => {
+
+            console.debug(path)
+
+            try {
+                // strip the domain and navigate to the path
+                navigate(new URL(path).pathname)
+            } catch (error) {
+                // if we couldn't navigate to the path, just go to the route of the currently active tool
+                navigate(new URL(activeToolRoute || '/').pathname)
+            }
+
+        }, [
+            activeToolRoute,
+            navigate,
+        ])
 
     useEffect(() => {
 
@@ -48,17 +71,24 @@ const Header: FC = () => {
             'init',
             navElementId,
             {
+                navigationHandler,
                 onReady() {
                     setReady(true)
                     document.getElementById('root')?.classList.add('app-ready')
                 },
                 signIn() { window.location.href = authUrlLogin() },
                 signOut() { window.location.href = authUrlLogout },
                 signUp() { window.location.href = authUrlSignup() },
+                toolName: activeToolName,
+                toolRoute: activeToolRoute,
                 type: 'tool',
             },
         )
-    }, [])
+    }, [
+        activeToolName,
+        activeToolRoute,
+        navigationHandler,
+    ])
 
     useEffect(() => {