Merge branch 'yoution-issue_96' into nav-bugbash-2

Author: luizrrodrigues

dist/dev/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'>

dist/prod/index.js

@@ -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/ChosenArrow/index.js

@@ -4,7 +4,7 @@ import styles from './styles.module.scss'
 
 const IconSelect = ({ show, x, isResize }) => {
   let styleObj = {
-    transform: `translateX(calc(${x}px - 50%))`
+    transform: `translateX(${x}px)`
 
   }
   // is window is on resize, stop animation

src/components/ChosenArrow/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/IconSelect/index.js

@@ -115,15 +115,15 @@ const TopNav = ({
       const rect = el.getBoundingClientRect()
       return {
         ...menu,
-        initialX: rect.left
+        initialX: rect.x || rect.left
       }
     }))
   }, [cache.refs, cache.slide])
 
   const getMenuCenter = useCallback(menuId => {
     const el = cache.refs[menuId]
     const rect = el.getBoundingClientRect()
-    return rect.left + rect.width / 2
+    return (rect.x || rect.left) + rect.width / 2
   }, [cache.refs])
 
   const setChosenArrowPos = useCallback(menuId => {
@@ -269,7 +269,7 @@ const TopNav = ({
         cache.slide[menu.id] = false
         const el = cache.refs[menu.id]
         const rect = el.getBoundingClientRect()
-        const relativeX = menu.initialX - rect.left
+        const relativeX = menu.initialX - (rect.x || rect.left)
         el.style.transform = `translateX(${relativeX}px)`
         setTimeout(() => {
           el.style.transition = 'transform 250ms ease-out'