From 33aee6d9ab5430398d64480398c52558338c51d4 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Fri, 10 Jan 2020 20:53:43 +0800
Subject: [PATCH] #2407 When the screen is resized, second level selection
 moves

---
 src/components/TopNav/index.js | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/TopNav/index.js b/src/components/TopNav/index.js
index 3552369..eafee2d 100644
--- a/src/components/TopNav/index.js
+++ b/src/components/TopNav/index.js
@@ -344,7 +344,7 @@ const TopNav = ({
     let found = { m1: null, m2: null, m3: null }
 
     // If haven't a path just return
-    if(!path_) return found
+    if (!path_) return found
 
     menuWithId_.forEach(level1 => {
       if (level1.href && path_.indexOf(level1.href) > -1) found = { m1: level1.id, m2: null }
@@ -357,14 +357,14 @@ const TopNav = ({
             } else {
               found = { m1: level1.id, m2: level2.id, m3: level3.id }
             }
-            if(!activeLevel3Id && level3.collapsed) setforceHideLevel3(true)
+            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;
+          const href = level3.href.indexOf('?') > -1 ? level3.href.split('?')[0] : level3.href
           if (path_.indexOf(href) > -1) found = { m1: level1.id, m3: level3.id }
         }
       })
@@ -372,6 +372,17 @@ const TopNav = ({
     return found
   }
 
+  useEffect(() => {
+    // when scren change size, keep green indicator keep static
+    const onResize = _.debounce(() => {
+      const { m3 } = getMenuIdsFromPath(menuWithId, path)
+      setIconSelectPos(m3)
+    }, 30)
+
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [getMenuIdsFromPath])
+
   useEffect(() => {
     if (!path || !menuWithId[0]) return
     setLeftNav(menuWithId)
@@ -390,13 +401,13 @@ const TopNav = ({
         forceExpand = true
         forceM2 = getMenuIdsFromPath(menuWithId, '/challenges').m2
       }
-    } else if (path.indexOf('/my-dashboard') > -1 || path.indexOf('/members/'+profileHandle) > -1) {
+    } else if (path.indexOf('/my-dashboard') > -1 || path.indexOf('/members/' + profileHandle) > -1) {
       // If My Dashboard and My Profile page
       setShowLevel3(true)
     } else if (path.indexOf('/community/learn') > -1 || path.indexOf('/thrive/tracks') > -1) {
       // Show 3rd level menu to Community [ Overview - How It Works ]
-      forceM2 = getMenuIdsFromPath(menuWithId, '/community').m2;
-    } else if(!m2) {
+      forceM2 = getMenuIdsFromPath(menuWithId, '/community').m2
+    } else if (!m2) {
       setShowLevel3(false)
       setforceHideLevel3(true)
     }