Skip to content

Commit d70565b

Browse files
luizrrodriguesluizrrodrigues
committed
Remove submenu area and arrow when submenu not present.
1 parent 8b5a5bf commit d70565b

File tree

7 files changed

+99
-81
lines changed

7 files changed

+99
-81
lines changed

‎dist/dev/index.js

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/prod/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/TopNav/MobileMenu.js

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,20 @@ import styles from './MobileMenu.module.scss'
55

66
const MobileMenu = ({ menu, activeChildId, createHandleClickItem }) => (
77
<div className={styles.secondaryNavMobile}>
8-
{menu.subMenu && menu.subMenu.map((level2, i) => (
9-
<a
10-
className={cn(styles.secondaryNavMobileItem, level2.id === activeChildId && styles.secondaryNavMobileItemOpen)}
11-
href={level2.href}
12-
key={`level2-${i}`}
13-
onClick={createHandleClickItem(level2.id)}
14-
>
15-
{level2.title}
16-
</a>
17-
))}
8+
{menu.subMenu && menu.subMenu.map((level2, i) => {
9+
if ((level2.subMenu && level2.subMenu.length > 0) || level2.href) {
10+
return (
11+
<a
12+
className={cn(styles.secondaryNavMobileItem, level2.id === activeChildId && styles.secondaryNavMobileItemOpen)}
13+
href={level2.href}
14+
key={`level2-${i}`}
15+
onClick={level2.subMenu && level2.subMenu.length > 0 ? createHandleClickItem(level2.id) : null}
16+
>
17+
{level2.title}
18+
</a>
19+
)
20+
}
21+
})}
1822
</div>
1923
)
2024

‎src/components/TopNav/MobileSubNav.js

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,35 @@ const MobileSubNav = ({ open, menu, isSecondaryMenu, activeChildId, onClick, cre
1010
className={cn(styles.mobileSubNav, open && styles.mobileSubNavOpen)}
1111
>
1212
<div className={styles.mobileSubNavMask} />
13-
<button className={styles.mobileSubNavHeader} onClick={onClick}>
14-
<span>{menu.title}</span>
15-
{open && <IconArrowSmallup />}
16-
{!open && <IconArrowSmalldown />}
17-
</button>
18-
{open && menu && (isSecondaryMenu ? menu.secondaryMenu : menu.subMenu).length && (
19-
<div className={styles.mobileSubNavContent}>
20-
{(isSecondaryMenu ? menu.secondaryMenu : menu.subMenu) && (isSecondaryMenu ? menu.secondaryMenu : menu.subMenu).map((level3, i) => (
21-
<a
22-
className={cn(styles.mobileSubNavChild, level3.id === activeChildId && styles.mobileSubNavChildOpen)}
23-
href={level3.href}
24-
key={`level3-${i}`}
25-
onClick={createHandleClickItem(level3.id)}
26-
>
27-
{level3.title}
28-
</a>
29-
))}
30-
</div>
31-
)}
13+
{(((!isSecondaryMenu && menu.subMenu && menu.subMenu.length > 0) ||
14+
(menu.secondaryMenu && menu.secondaryMenu.length > 0)) &&
15+
<>
16+
<button className={styles.mobileSubNavHeader} onClick={onClick}>
17+
<span>{menu.title}</span>
18+
{open ? <IconArrowSmallup /> : <IconArrowSmalldown />}
19+
</button>
20+
{open && (
21+
<div className={styles.mobileSubNavContent}>
22+
{(isSecondaryMenu ? menu.secondaryMenu : menu.subMenu).map((level3, i) => (
23+
<a
24+
className={cn(styles.mobileSubNavChild, level3.id === activeChildId && styles.mobileSubNavChildOpen)}
25+
href={level3.href}
26+
key={`level3-${i}`}
27+
onClick={createHandleClickItem(level3.id)}
28+
>
29+
{level3.title}
30+
</a>
31+
))}
32+
</div>
33+
)}
34+
</>
35+
) ||
36+
<>
37+
<dev className={styles.mobileSubNavHeader}>
38+
<span>{menu.title}</span>
39+
</dev>
40+
</>
41+
}
3242
</div>
3343
)
3444

‎src/components/TopNav/PrimaryNav.js

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,21 @@ const PrimaryNav = ({
7171
key={`level2-${i}-container`}
7272
ref={createSetRef(`level2Container${i}`)}
7373
>
74-
{level1.subMenu.filter(filterNotInMore).map((level2, i) => (
75-
<a
76-
className={cn(styles.primaryLevel2, level2.id === activeLevel2Id && styles.primaryLevel2Open)}
77-
href={level2.href}
78-
key={`level2-${i}`}
79-
onClick={createHandleClickLevel2(level2.id, true)}
80-
ref={createSetRef(level2.id)}
81-
>
82-
{level2.title}
83-
</a>
84-
))}
74+
{level1.subMenu.filter(filterNotInMore).map((level2, i) => {
75+
if ((level2.subMenu && level2.subMenu.length > 0) || level2.href) {
76+
return (
77+
<a
78+
className={cn(styles.primaryLevel2, level2.id === activeLevel2Id && styles.primaryLevel2Open)}
79+
href={level2.href}
80+
key={`level2-${i}`}
81+
onClick={level2.subMenu && level2.subMenu.length > 0 ? createHandleClickLevel2(level2.id, true) : null}
82+
ref={createSetRef(level2.id)}
83+
>
84+
{level2.title}
85+
</a>
86+
)
87+
}
88+
})}
8589
{/* The More menu */}
8690
{level1.id === activeLevel1Id && moreMenu && moreMenu.length > 0 && (
8791
<div className={cn(styles.moreBtnContainer, openMore && styles.moreOpen)}>

‎src/components/TopNav/SubNav.js

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,27 @@ const SubNav = ({
1616
indicatorX,
1717
createHandleClickItem,
1818
createSetRef
19-
}) => {
20-
if (!menu || (isSecondaryMenu ? menu.secondaryMenu : menu.subMenu).length === 0) return null
21-
return (
22-
<div className={cn(styles.secondaryNav, open && styles.secondaryNavOpen)}>
23-
<div className={styles.secondaryNavLinkContainer}>
24-
{menu && (isSecondaryMenu ? menu.secondaryMenu : menu.subMenu) && (isSecondaryMenu ? menu.secondaryMenu : menu.subMenu).map((level3, i) => {
25-
const to = _.isEmpty(level3.link) ? level3.href : level3.link
26-
return (
27-
<Link
28-
className={cn(styles.secondaryNavItem, level3.id === activeChildId && styles.secondaryNavItemOpen)}
29-
key={`level3-${i}`}
30-
to={to}
31-
onClick={!level3.openNewTab && createHandleClickItem(level3.id)}
32-
openNewTab={level3.openNewTab}
33-
>
34-
<span ref={createSetRef(level3.id)}>{level3.title}</span>
35-
<span className={cn(styles.indicator)} />
36-
</Link>
37-
)
38-
})}
39-
<IconSelect isResize={isResize} show={showIndicator} x={indicatorX} /> </div>
40-
</div>
41-
)
42-
}
19+
}) => (
20+
<div className={cn(styles.secondaryNav, open && styles.secondaryNavOpen)}>
21+
<div className={styles.secondaryNavLinkContainer}>
22+
{menu && (isSecondaryMenu ? menu.secondaryMenu : menu.subMenu).map((level3, i) => {
23+
const to = _.isEmpty(level3.link) ? level3.href : level3.link
24+
return (
25+
<Link
26+
className={cn(styles.secondaryNavItem, level3.id === activeChildId && styles.secondaryNavItemOpen)}
27+
key={`level3-${i}`}
28+
to={to}
29+
onClick={!level3.openNewTab && createHandleClickItem(level3.id)}
30+
openNewTab={level3.openNewTab}
31+
>
32+
<span ref={createSetRef(level3.id)}>{level3.title}</span>
33+
<span className={cn(styles.indicator)} />
34+
</Link>
35+
)
36+
})}
37+
<IconSelect isResize={isResize} show={showIndicator} x={indicatorX} /> </div>
38+
</div>
39+
)
4340

4441
SubNav.propTypes = {
4542
open: PropTypes.bool,

‎src/components/TopNav/index.js

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -532,17 +532,20 @@ const TopNav = ({
532532
/>
533533

534534
{/* Level 3 menu */}
535-
<SubNav
536-
open={forceHideLevel3 ? false : showLevel3}
537-
menu={activeMenu2 || activeMenu1}
538-
isResize={isResize}
539-
isSecondaryMenu={!activeMenu2}
540-
activeChildId={activeLevel3Id}
541-
showIndicator={showIconSelect}
542-
indicatorX={iconSelectX}
543-
createHandleClickItem={createHandleClickLevel3}
544-
createSetRef={createSetRef}
545-
/>
535+
{((activeMenu2 && activeMenu2.subMenu && activeMenu2.subMenu.length > 0) ||
536+
(!activeMenu2 && activeMenu1 && activeMenu1.secondaryMenu && activeMenu1.secondaryMenu.length > 0)) &&
537+
<SubNav
538+
open={forceHideLevel3 ? false : showLevel3}
539+
menu={activeMenu2 || activeMenu1}
540+
isResize={isResize}
541+
isSecondaryMenu={!activeMenu2}
542+
activeChildId={activeLevel3Id}
543+
showIndicator={showIconSelect}
544+
indicatorX={iconSelectX}
545+
createHandleClickItem={createHandleClickLevel3}
546+
createSetRef={createSetRef}
547+
/>
548+
}
546549

547550
{/* Mobile level 2 menu */}
548551
{showLeftMenu && activeMenu1 && (

0 commit comments

Comments
 (0)