Merge pull request #171 from topcoder-platform/nav-hotfix-thrive-link

Nav hotfix thrive link

Author: sushilshinde

dist/dev/index.js

@@ -12,6 +12,7 @@ const SubNav = ({
   isSecondaryMenu,
   isResize,
   activeChildId,
+  exact,
   showIndicator,
   indicatorX,
   createHandleClickItem,
@@ -23,7 +24,11 @@ const SubNav = ({
         const to = _.isEmpty(level3.link) ? level3.href : level3.link
         return (
           <Link
-            className={cn(styles.secondaryNavItem, level3.id === activeChildId && styles.secondaryNavItemOpen)}
+            className={cn(
+              styles.secondaryNavItem,
+              level3.id === activeChildId && styles.secondaryNavItemOpen,
+              (level3.id === activeChildId && exact) && styles.secondaryNavItemActive
+            )}
             key={`level3-${i}`}
             to={to}
             onClick={!level3.openNewTab && createHandleClickItem(level3.id)}
@@ -44,6 +49,7 @@ SubNav.propTypes = {
   isResize: PropTypes.bool,
   isSecondaryMenu: PropTypes.bool,
   activeChildId: PropTypes.any,
+  exact: PropTypes.bool,
   showIndicator: PropTypes.bool,
   indicatorX: PropTypes.number,
   createHandleClickItem: PropTypes.func,

dist/prod/index.js

@@ -70,6 +70,8 @@
       }
       &.secondaryNavItemOpen {
         @include Roboto-Bold;
+      }
+      &.secondaryNavItemActive {
         @include not-clickable;
       }
     }

src/components/TopNav/SubNav.js

@@ -90,6 +90,7 @@ const TopNav = ({
   const [activeLevel1Id, setActiveLevel1Id] = useState()
   const [activeLevel2Id, setActiveLevel2Id] = useState()
   const [activeLevel3Id, setActiveLevel3Id] = useState()
+  const [level3Exact, setLevel3Exact] = useState(false)
   const [isResize, setResize] = useState(false)
   const [showLevel3, setShowLevel3] = useState(false)
   const [forceHideLevel3, setforceHideLevel3] = useState(false)
@@ -249,46 +250,6 @@ const TopNav = ({
     }
   }, [activeLevel1Id, activeLevel2Id, path])
 
-  const isLevel3ExactPath = (menuWithId_, path_) => {
-    let found = { exact: false }
-
-    // If haven't a path just return
-    if (!path_) return found
-
-    menuWithId_.forEach(level1 => {
-      level1.subMenu && level1.subMenu.forEach(level2 => {
-        level2.subMenu && level2.subMenu.forEach(level3 => {
-          if (level3.href && path_.indexOf(level3.href) > -1) {
-            if (found.exact) {
-              if (level3.href === path_) found = { exact: true }
-            } else {
-              found = { exact: path_.endsWith(level3.href) }
-            }
-          }
-        })
-      })
-      level1.secondaryMenu && level1.secondaryMenu.forEach(level3 => {
-        if (level3.href) {
-          // Check if path have parameters
-          const href = level3.href.indexOf('?') > -1 ? level3.href.split('?')[0] : level3.href
-          if (path_.indexOf(href) > -1) found = { exact: path_.endsWith(href) }
-        }
-      })
-    })
-    return found
-  }
-
-  useEffect(() => {
-    if (!path || !menuWithId) return
-    // check if current path is an exact matches with level3 href
-    const { exact } = isLevel3ExactPath(menuWithId, path)
-    if (!exact) {
-      setActiveLevel3Id(undefined)
-      setIconSelectPos(undefined)
-      setShowIconSelect(false)
-    }
-  }, [activeLevel3Id])
-
   const createHandleClickLevel3 = menuId => () => {
     setActiveLevel3Id(menuId)
     setIconSelectPos(menuId)
@@ -445,20 +406,19 @@ const TopNav = ({
         if (level2.href && path_.indexOf(level2.href) > -1) found = { m1: level1.id, m2: level2.id }
         level2.subMenu && level2.subMenu.forEach(level3 => {
           if (level3.href && path_.indexOf(level3.href) > -1) {
-            if (found.m3) {
-              if (level3.href === path_) found = { m1: level1.id, m2: level2.id, m3: level3.id }
-            } else {
+            if (level3.href && level3.href === path_) {
+              found = { m1: level1.id, m2: level2.id, m3: level3.id }
+              setLevel3Exact(true)
+            } else if (!found.m3) {
               found = { m1: level1.id, m2: level2.id, m3: level3.id }
             }
             if (!activeLevel3Id && level3.collapsed) setforceHideLevel3(true)
           }
         })
       })
       level1.secondaryMenu && level1.secondaryMenu.forEach(level3 => {
-        if (level3.href) {
-          // Check if path have parameters
-          const href = level3.href.indexOf('?') > -1 ? level3.href.split('?')[0] : level3.href
-          if (path_.indexOf(href) > -1) found = { m1: level1.id, m3: level3.id }
+        if (level3.href && level3.href === path_) {
+          found = { m1: level1.id, m3: level3.id }
         }
       })
     })
@@ -578,6 +538,7 @@ const TopNav = ({
             isResize={isResize}
             isSecondaryMenu={!activeMenu2}
             activeChildId={activeLevel3Id}
+            exact={level3Exact}
             showIndicator={showIconSelect}
             indicatorX={iconSelectX}
             createHandleClickItem={createHandleClickLevel3}