#96 The current Menu selection is not shown on the IE11 and Edge

Author: yoution

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'>

src/components/ChosenArrow/styles.module.scss

@@ -3,7 +3,7 @@
 .chosenArrow {
   position: absolute;
   bottom: -1px;
-  left: 0;
+  left: -20px;
   z-index: 1;
   -webkit-transition: -webkit-transform 0.5s;
   transition: transform 0.5s;

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}
   />
 )

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;

src/components/TopNav/index.js

@@ -113,15 +113,15 @@ const TopNav = ({
       const rect = el.getBoundingClientRect()
       return {
         ...menu,
-        initialX: rect.x
+        initialX: rect.x || rect.left
       }
     }))
   }, [cache.refs, cache.slide])
 
   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)
     }