topcoder-platform#95 New Nav: When the screen is resized, second level selection moves

Author: yoution

src/components/IconSelect/index.js

@@ -2,15 +2,26 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './styles.module.scss'
 
-const IconSelect = ({ show, x }) => (
-  <span
+const IconSelect = ({ show, x, isResize }) => {
+  let styleObj = {
+    transform: `translateX(calc(${x}px - 50%))`
+
+  }
+  // is window is on resize, stop animation
+  if (isResize) {
+    styleObj['transition'] = 'auto'
+    styleObj['-webkit-transition'] = 'auto'
+  }
+  return <span
     className={styles.iconSelect}
-    style={{ transform: `translateX(calc(${x}px - 50%))` }}
+    style={styleObj}
     hidden={!show}
   />
-)
+}
 
 IconSelect.propTypes = {
+  // screen is changing size
+  isResize: PropTypes.bool,
   /** Show or hide the icon */
   show: PropTypes.bool,
   /** The x position of the arrow. Generally this will be the center of the target */

src/components/TopNav/SubNav.js

@@ -10,6 +10,7 @@ const SubNav = ({
   open,
   menu,
   isSecondaryMenu,
+  isResize,
   activeChildId,
   showIndicator,
   indicatorX,
@@ -32,14 +33,14 @@ const SubNav = ({
           </Link>
         )
       })}
-      <IconSelect show={showIndicator} x={indicatorX} />
-    </div>
+      <IconSelect isResize={isResize} show={showIndicator} x={indicatorX} /> </div>
   </div>
 )
 
 SubNav.propTypes = {
   open: PropTypes.bool,
   menu: PropTypes.object,
+  isResize: PropTypes.bool,
   isSecondaryMenu: PropTypes.bool,
   activeChildId: PropTypes.any,
   showIndicator: PropTypes.bool,

src/components/TopNav/index.js

@@ -70,6 +70,7 @@ const TopNav = ({
   const [activeLevel1Id, setActiveLevel1Id] = useState()
   const [activeLevel2Id, setActiveLevel2Id] = useState()
   const [activeLevel3Id, setActiveLevel3Id] = useState()
+  const [isResize, setResize] = useState(false)
   const [showLevel3, setShowLevel3] = useState(false)
   const [forceHideLevel3, setforceHideLevel3] = useState(false)
 
@@ -334,7 +335,7 @@ const TopNav = ({
     const onResize = _.debounce(() => {
       regenerateMoreMenu([])
       // tick to update menu (reposition arrow)
-      setChosenArrowTick(x => x + 1)
+      // setChosenArrowTick(x => x + 1)
     }, 100)
     window.addEventListener('resize', onResize)
     return () => window.removeEventListener('resize', onResize)
@@ -344,7 +345,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,21 +358,40 @@ 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 }
         }
       })
     })
     return found
   }
 
+  let timeId = 0
+  useEffect(() => {
+    // when scren change size, keep green indicator keep static
+    const onResize = _.debounce(() => {
+      if (timeId) { clearTimeout(timeId) }
+      const { m3 } = getMenuIdsFromPath(menuWithId, path)
+      activeLevel2Id && setChosenArrowPos(activeLevel2Id)
+      setIconSelectPos(m3)
+      setResize(true)
+      timeId = setTimeout(() => {
+        setResize(false)
+        timeId = 0
+      }, 1000)
+    }, 50)
+
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [getMenuIdsFromPath])
+
   useEffect(() => {
     if (!path || !menuWithId[0]) return
     setLeftNav(menuWithId)
@@ -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)
     }
@@ -459,6 +479,7 @@ const TopNav = ({
         <SubNav
           open={forceHideLevel3 ? false : showLevel3}
           menu={activeMenu2 || activeMenu1}
+          isResize={isResize}
           isSecondaryMenu={!activeMenu2}
           activeChildId={activeLevel3Id}
           showIndicator={showIconSelect}