From 3f9d3afe314e2995e8682e4435302e7ed0a80db4 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Fri, 10 Jan 2020 10:16:23 +0800
Subject: [PATCH]  #2521 fixed bug for "more" tab swapping position

---
 src/components/TopNav/index.js | 34 +++++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/TopNav/index.js b/src/components/TopNav/index.js
index 3552369..344e229 100644
--- a/src/components/TopNav/index.js
+++ b/src/components/TopNav/index.js
@@ -102,6 +102,26 @@ const TopNav = ({
     return menu1 && menu1.subMenu && menu1.subMenu.find(level2 => level2.id === level2Id)
   }
 
+  // if click level2 menu from 'more', exchange to the first place
+  const reArrangeLevel2Menu = (level1Id, menuId) => {
+    var menu1 = findLevel1Menu(level1Id)
+    if (menu1 && menu1.subMenu) {
+      let subMenu = menu1.subMenu
+      let pos = _.findIndex(subMenu, (level2) => {
+        return level2.id === menuId
+      })
+      let t = subMenu[0]
+      subMenu[0] = subMenu[pos]
+      subMenu[pos] = t
+
+      pos = _.findIndex(moreMenu, (level2) => {
+        return level2.id === menuId
+      })
+      moreMenu[pos] = t
+      setMoreMenu(moreMenu)
+      setChosenArrowPos(menuId)
+    }
+  }
   const activeMenu1 = findLevel1Menu(activeLevel1Id)
   const activeMenu2 = findLevel2Menu(activeLevel1Id, activeLevel2Id)
 
@@ -218,9 +238,9 @@ const TopNav = ({
     setActiveLevel2Id(menuId)
     setShowLevel3(true)
     setforceHideLevel3(false)
-    setChosenArrowPos(moreId)
     // let the level 3 menu mounted first for sliding indicator to work
     setTimeout(() => {
+      reArrangeLevel2Menu(activeLevel1Id, menuId)
       const menu = findLevel2Menu(activeLevel1Id, menuId)
       if (menu && menu.subMenu) {
         // select first level 3 item
@@ -344,7 +364,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 +377,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 }
         }
       })
@@ -390,13 +410,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)
     }