#170: Ability to navigate back to THRIVE homepage from an article

Author: luizrrodrigues

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,42 +250,6 @@ const TopNav = ({
     }
   }, [activeLevel1Id, activeLevel2Id, path])
 
-  const isLevel3ExactPath = (menuWithId_, path_) => {
-    let exact = false
-
-    // If haven't a path just return
-    if (!path_) return exact
-
-    menuWithId_.forEach(level1 => {
-      level1.subMenu && level1.subMenu.forEach(level2 => {
-        level2.subMenu && level2.subMenu.forEach(level3 => {
-          if (level3.href && level3.href === path_) {
-            exact = true
-            return exact
-          }
-        })
-      })
-      level1.secondaryMenu && level1.secondaryMenu.forEach(level3 => {
-        if (level3.href && level3.href === path_) {
-          exact = true
-          return exact
-        }
-      })
-    })
-    return exact
-  }
-
-  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)
@@ -441,9 +406,10 @@ 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)
@@ -572,6 +538,7 @@ const TopNav = ({
             isResize={isResize}
             isSecondaryMenu={!activeMenu2}
             activeChildId={activeLevel3Id}
+            exact={level3Exact}
             showIndicator={showIconSelect}
             indicatorX={iconSelectX}
             createHandleClickItem={createHandleClickLevel3}