issue 2396 fix

src/components/TopNav/MobileNav.js

@@ -15,7 +15,9 @@ const MobileNav = ({ showLeftMenu, onClickLeftMenu, logo, rightMenu }) => (
         )}
       </button>
     </div>
-    {logo}
+    <a href='/'>
+      {logo}
+    </a>
     {rightMenu && (
       <div className={styles.rightMenu}>
         {rightMenu}

src/components/TopNav/MobileSubNav.js

@@ -2,20 +2,22 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import IconArrowSmalldown from '../../assets/images/arrow-small-down.svg'
+import IconArrowSmallup from '../../assets/images/arrow-small-up.svg'
 import styles from './MobileSubNav.module.scss'
 
-const MobileSubNav = ({ open, menu, activeChildId, onClick, createHandleClickItem }) => (
+const MobileSubNav = ({ open, menu, isSecondaryMenu, activeChildId, onClick, createHandleClickItem }) => (
   <div
     className={cn(styles.mobileSubNav, open && styles.mobileSubNavOpen)}
   >
     <div className={styles.mobileSubNavMask} />
     <button className={styles.mobileSubNavHeader} onClick={onClick}>
       <span>{menu.title}</span>
-      <IconArrowSmalldown />
+      {open && <IconArrowSmallup />}
+      {!open && <IconArrowSmalldown />}
     </button>
     {open && (
       <div className={styles.mobileSubNavContent}>
-        {menu.subMenu && menu.subMenu.map((level3, i) => (
+        {(isSecondaryMenu ? menu.secondaryMenu : menu.subMenu) && (isSecondaryMenu ? menu.secondaryMenu : menu.subMenu).map((level3, i) => (
           <a
             className={cn(styles.mobileSubNavChild, level3.id === activeChildId && styles.mobileSubNavChildOpen)}
             href={level3.href}
@@ -33,6 +35,7 @@ const MobileSubNav = ({ open, menu, activeChildId, onClick, createHandleClickIte
 MobileSubNav.propTypes = {
   open: PropTypes.bool,
   menu: PropTypes.object,
+  isSecondaryMenu: PropTypes.bool,
   activeChildId: PropTypes.any,
   onClick: PropTypes.func,
   createHandleClickItem: PropTypes.func

src/components/TopNav/PrimaryNav.js

@@ -33,12 +33,13 @@ const PrimaryNav = ({
   return (
     <div className={cn(styles.primaryNavContainer, showLeftMenu && styles.primaryNavContainerOpen)}>
       <div className={styles.primaryNav} ref={createSetRef('primaryNav')}>
-        <div
+        <a
           className={cn(styles.tcLogo, collapsed && styles.tcLogoPush)}
           onClick={onClickLogo}
+          href='/'
         >
           {logo}
-        </div>
+        </a>
         {menu.map((level1, i) => ([
           <span className={styles.primaryLevel1Separator} key={`separator-${i}`} />,
           /* Level 1 menu item */

src/components/TopNav/SubNav.js

@@ -9,6 +9,7 @@ import styles from './SubNav.module.scss'
 const SubNav = ({
   open,
   menu,
+  isSecondaryMenu,
   activeChildId,
   showIndicator,
   indicatorX,
@@ -18,7 +19,7 @@ const SubNav = ({
   <Router>
     <div className={cn(styles.secondaryNav, open && styles.secondaryNavOpen)}>
       <div className={styles.secondaryNavLinkContainer}>
-        {menu && menu.subMenu && menu.subMenu.map((level3, i) => {
+        {menu && (isSecondaryMenu ? menu.secondaryMenu : menu.subMenu) && (isSecondaryMenu ? menu.secondaryMenu : menu.subMenu).map((level3, i) => {
           if (!_.isEmpty(level3.link)) {
             return (
               <Link
@@ -52,6 +53,7 @@ const SubNav = ({
 SubNav.propTypes = {
   open: PropTypes.bool,
   menu: PropTypes.object,
+  isSecondaryMenu: PropTypes.bool,
   activeChildId: PropTypes.any,
   showIndicator: PropTypes.bool,
   indicatorX: PropTypes.number,

src/components/TopNav/index.js

@@ -15,8 +15,8 @@ const moreId = 'more'
 
 let id = 1
 
-const initMenuId = menu => {
-  return menu
+const initMenuId = (menu, profileHandle, loggedIn) => {
+  menu = menu
     .map(level1 => ({
       ...level1,
       id: level1.id || id++,
@@ -27,8 +27,21 @@ const initMenuId = menu => {
           ...level3,
           id: level3.id || id++
         }))
+      })),
+      secondaryMenu: ((loggedIn && profileHandle) ? level1.secondaryMenuForLoggedInUser : level1.secondaryMenuForGuest)
+    }))
+  menu = menu
+    .map(level1 => ({
+      ...level1,
+      secondaryMenu: level1.secondaryMenu && level1.secondaryMenu.map(levelsec => ({
+        ...levelsec,
+        id: levelsec.id || id++,
+        // set user profile link
+        href: levelsec.id !== 'myprofile' ? (levelsec.href || '#')
+          : (profileHandle ? `/members/${profileHandle}` : '/')
       }))
     }))
+  return menu
 }
 
 /**
@@ -41,8 +54,11 @@ const TopNav = ({
   theme,
   currentLevel1Id,
   onChangeLevel1Id,
+  path,
   setOpenMore,
-  openMore
+  openMore,
+  loggedIn,
+  profileHandle
 }) => {
   const [cache] = useState({
     refs: {},
@@ -61,7 +77,7 @@ const TopNav = ({
   const [showIconSelect, setShowIconSelect] = useState()
   const [iconSelectX, setIconSelectX] = useState()
 
-  const menuWithId = useMemo(() => initMenuId(_menu), [_menu])
+  const menuWithId = useMemo(() => initMenuId(_menu, profileHandle, loggedIn), [_menu, profileHandle, loggedIn])
 
   const [leftNav, setLeftNav] = useState(menuWithId)
 
@@ -114,12 +130,22 @@ const TopNav = ({
   }
 
   const handleClickLogo = () => {
-    setCollapsed(true)
-    setActiveLevel1Id()
-    setShowLevel3(false)
-    setShowChosenArrow(false)
+
+  }
+
+  const expandLevel1Menu = (menuId) => {
+    setOpenMore(false)
+    setCollapsed(false)
+    setActiveLevel1Id(menuId)
+    onChangeLevel1Id(menuId)
+    setActiveLevel2Id()
+    setShowLevel3(true)
     startSlide()
-    onChangeLevel1Id()
+    setTimeout(() => {
+      // wait for sliding to end before showing arrow for the first time
+      setShowChosenArrow(true)
+      updateLevel3Indicator(menuId, null)
+    }, collapsed ? 250 : 0)
   }
 
   const createHandleClickLevel1 = useCallback(menuId => () => {
@@ -128,12 +154,13 @@ const TopNav = ({
     setActiveLevel1Id(menuId)
     onChangeLevel1Id(menuId)
     setActiveLevel2Id()
-    setShowLevel3(false)
+    setShowLevel3(true)
     startSlide()
     setShowIconSelect(false)
     setTimeout(() => {
       // wait for sliding to end before showing arrow for the first time
       setShowChosenArrow(true)
+      updateLevel3Indicator(menuId, null)
     }, collapsed ? 250 : 0)
     // trigger the execution of useLayoutEffect below, this is necessary because
     // the other dependencies don't change
@@ -150,7 +177,7 @@ const TopNav = ({
     // get final menu pos before it slide. Do this before sliding start, or
     // we'll get incorrect pos
     activeLevel1Id && setChosenArrowPos(activeLevel1Id)
-  }, [activeLevel1Id, setChosenArrowPos, chosenArrowTick])
+  }, [activeLevel1Id, setChosenArrowPos, chosenArrowTick, showLeftMenu])
 
   const createHandleClickLevel2 = menuId => () => {
     setOpenMore(false)
@@ -159,15 +186,29 @@ const TopNav = ({
     setChosenArrowPos(menuId)
     // let the level 3 menu mounted first for sliding indicator to work
     setTimeout(() => {
-      const menu = findLevel2Menu(activeLevel1Id, menuId)
-      if (menu && menu.subMenu) {
-        // select first level 3 item
-        setActiveLevel3Id(menu.subMenu[0].id)
-        // this requires the item element to be mounted first
-        setIconSelectPos(menu.subMenu[0].id)
-      }
+      updateLevel3Indicator(activeLevel1Id, menuId)
     })
-    !showIconSelect && setTimeout(() => setShowIconSelect(true), 300)
+  }
+
+  const updateLevel3Indicator = (menu1Id, menu2Id) => {
+    const activeMenuL1 = findLevel1Menu(menu1Id)
+    const activeMenuL2 = findLevel2Menu(menu1Id, menu2Id)
+    const menu = activeMenuL2 || activeMenuL1
+    if (!menu) return
+    const submenu = activeMenuL2 ? menu.subMenu : menu.secondaryMenu
+    if (menu && submenu) {
+      let index = _.findIndex(submenu, (item) => {
+        return item.href.indexOf(path) > -1
+      })
+      // check if url matches else do not show submenu selected
+      if (index > -1) {
+        setActiveLevel3Id(submenu[index].id)
+        setIconSelectPos(submenu[index].id)
+        setShowIconSelect(true)
+      } else {
+        setShowIconSelect(false)
+      }
+    }
   }
 
   const createHandleClickLevel3 = menuId => () => {
@@ -202,10 +243,7 @@ const TopNav = ({
   const createHandleClickLevel2Mobile = menuId => () => {
     setShowLeftMenu(false)
     setActiveLevel2Id(menuId)
-    const menu = findLevel2Menu(activeLevel1Id, menuId)
-    if (menu && menu.subMenu) {
-      setActiveLevel3Id(menu.subMenu[0].id)
-    }
+    updateLevel3Indicator(activeLevel1Id, menuId)
   }
 
   const createHandleClickLevel3Mobile = menuId => () => {
@@ -300,11 +338,23 @@ const TopNav = ({
 
   useEffect(() => {
     // trigger more menu generation on resize
-    const onResize = _.debounce(() => regenerateMoreMenu([]), 100)
+    const onResize = _.debounce(() => {
+      regenerateMoreMenu([])
+      // tick to update menu (reposition arrow)
+      setChosenArrowTick(x => x + 1)
+    }, 100)
     window.addEventListener('resize', onResize)
     return () => window.removeEventListener('resize', onResize)
   }, [])
 
+  // expand first Level1Menu(like work/business) on login / logout. also regenerate menu to add/delete profile menu.
+  useEffect(() => {
+    if (loggedIn && profileHandle && _menu[0]) {
+      expandLevel1Menu(_menu[0].id)
+      setLeftNav(menuWithId)
+    }
+  }, [loggedIn, profileHandle])
+
   return (
     <div className={cn(styles.themeWrapper, `theme-${theme}`)}>
       <div className={styles.headerNavUi}>
@@ -318,10 +368,11 @@ const TopNav = ({
         />
 
         {/* Mobile sub navigation (active level 2 menu) */}
-        {!showLeftMenu && activeMenu2 && (
+        {!showLeftMenu && (activeMenu2 || activeMenu1) && (
           <MobileSubNav
             open={showMobileSubMenu}
-            menu={activeMenu2}
+            menu={activeMenu2 || activeMenu1}
+            isSecondaryMenu={!activeMenu2}
             activeChildId={activeLevel3Id}
             onClick={handleClickSubMenu}
             createHandleClickItem={createHandleClickLevel3Mobile}
@@ -355,7 +406,8 @@ const TopNav = ({
         {/* Level 3 menu */}
         <SubNav
           open={showLevel3}
-          menu={activeMenu2}
+          menu={activeMenu2 || activeMenu1}
+          isSecondaryMenu={!activeMenu2}
           activeChildId={activeLevel3Id}
           showIndicator={showIconSelect}
           indicatorX={iconSelectX}
@@ -403,9 +455,15 @@ TopNav.propTypes = {
 
   onChangeLevel1Id: PropTypes.func,
 
+  path: PropTypes.string,
+
   setOpenMore: PropTypes.func,
 
   openMore: PropTypes.bool,
+
+  loggedIn: PropTypes.bool,
+
+  profileHandle: PropTypes.string
 }
 
 export default TopNav