From 478a416f6091805bdeadfdbdf980590e89943f05 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Tue, 14 Jan 2020 21:46:22 +0800
Subject: [PATCH] #96 The current Menu selection is not shown on the IE11 and
 Edge

---
 src/components/ChosenArrow/index.js           |  2 +-
 src/components/ChosenArrow/styles.module.scss |  2 +-
 src/components/IconSelect/index.js            |  2 +-
 src/components/IconSelect/styles.module.scss  |  2 +-
 src/components/TopNav/index.js                | 18 +++++++++---------
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/ChosenArrow/index.js b/src/components/ChosenArrow/index.js
index 6d4a352..3fe3b85 100644
--- a/src/components/ChosenArrow/index.js
+++ b/src/components/ChosenArrow/index.js
@@ -5,7 +5,7 @@ import styles from './styles.module.scss'
 const ChosenArrow = ({ show, x }) => (
   <div
     className={styles.chosenArrow}
-    style={{ transform: `translateX(calc(${x}px - 50%))` }}
+    style={{ transform: `translateX(${x}px)` }}
     hidden={!show}
   >
     <svg width='40px' height='10px' viewBox='0 0 40 10'>
diff --git a/src/components/ChosenArrow/styles.module.scss b/src/components/ChosenArrow/styles.module.scss
index f4c5fd1..498aef2 100644
--- a/src/components/ChosenArrow/styles.module.scss
+++ b/src/components/ChosenArrow/styles.module.scss
@@ -3,7 +3,7 @@
 .chosenArrow {
   position: absolute;
   bottom: -1px;
-  left: 0;
+  left: -7px;
   z-index: 1;
   -webkit-transition: -webkit-transform 0.5s;
   transition: transform 0.5s;
diff --git a/src/components/IconSelect/index.js b/src/components/IconSelect/index.js
index 7fd57bf..2cd7365 100644
--- a/src/components/IconSelect/index.js
+++ b/src/components/IconSelect/index.js
@@ -5,7 +5,7 @@ import styles from './styles.module.scss'
 const IconSelect = ({ show, x }) => (
   <span
     className={styles.iconSelect}
-    style={{ transform: `translateX(calc(${x}px - 50%))` }}
+    style={{ transform: `translateX(${x}px)` }}
     hidden={!show}
   />
 )
diff --git a/src/components/IconSelect/styles.module.scss b/src/components/IconSelect/styles.module.scss
index 9831bff..9968523 100644
--- a/src/components/IconSelect/styles.module.scss
+++ b/src/components/IconSelect/styles.module.scss
@@ -3,7 +3,7 @@
 .iconSelect {
   position: absolute;
   bottom: -1px;
-  left: 0;
+  left: -7px;
   width: 15px;
   height: 3px;
   border-radius: 1.5px;
diff --git a/src/components/TopNav/index.js b/src/components/TopNav/index.js
index 3552369..2f63756 100644
--- a/src/components/TopNav/index.js
+++ b/src/components/TopNav/index.js
@@ -113,7 +113,7 @@ const TopNav = ({
       const rect = el.getBoundingClientRect()
       return {
         ...menu,
-        initialX: rect.x
+        initialX: rect.x || rect.left
       }
     }))
   }, [cache.refs, cache.slide])
@@ -121,7 +121,7 @@ const TopNav = ({
   const getMenuCenter = useCallback(menuId => {
     const el = cache.refs[menuId]
     const rect = el.getBoundingClientRect()
-    return rect.x + rect.width / 2
+    return (rect.x || rect.left) + rect.width / 2
   }, [cache.refs])
 
   const setChosenArrowPos = useCallback(menuId => {
@@ -263,7 +263,7 @@ const TopNav = ({
         cache.slide[menu.id] = false
         const el = cache.refs[menu.id]
         const rect = el.getBoundingClientRect()
-        const relativeX = menu.initialX - rect.x
+        const relativeX = menu.initialX - (rect.x || rect.left)
         el.style.transform = `translateX(${relativeX}px)`
         setTimeout(() => {
           el.style.transition = 'transform 250ms ease-out'
@@ -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 }
         }
       })
@@ -390,13 +390,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)
     }