diff --git a/web/e.cash/components/footer/index.js b/web/e.cash/components/footer/index.js --- a/web/e.cash/components/footer/index.js +++ b/web/e.cash/components/footer/index.js @@ -22,6 +22,9 @@ export default function Footer() { const currentYear = new Date().getFullYear(); const copyrightSymbol = '\u00A9'; + const navitemsWithoutDropdown = navitems.filter( + navitem => !navitem.dropdown_items, + ); return ( @@ -65,25 +68,45 @@ - {navitems.map(navitem => ( -
-
{navitem.nav_item}
- {navitem.dropdown_items ? ( - - {navitem.dropdown_items.map( - dropdownitem => ( - - {dropdownitem.title} - - ), - )} - - ) : null} -
- ))} + {navitems.map( + (navitem, index) => + navitem.dropdown_items && ( +
+
{navitem.nav_item}
+ + {navitem.dropdown_items.map( + dropdownitem => ( + + {dropdownitem.title} + + ), + )} + {index === 0 && + navitemsWithoutDropdown.map( + item => ( + + {item.nav_item} + + ), + )} + +
+ ), + )}
diff --git a/web/e.cash/components/footer/styles.js b/web/e.cash/components/footer/styles.js --- a/web/e.cash/components/footer/styles.js +++ b/web/e.cash/components/footer/styles.js @@ -47,7 +47,7 @@ display: flex; justify-content: space-between; - ${props => props.theme.breakpoint.medium} { + ${props => props.theme.breakpoint.large} { flex-direction: column; } `; @@ -113,6 +113,9 @@ flex-direction: column; margin-top: 50px; } + ${props => props.theme.breakpoint.large} { + margin-top: 30px; + } > div { padding: 0; @@ -121,6 +124,11 @@ margin-left: 0; margin-bottom: 20px; } + :first-child { + ${props => props.theme.breakpoint.large} { + margin-left: 0px; + } + } > div:first-child { font-size: 14px; diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js --- a/web/e.cash/styles/theme.js +++ b/web/e.cash/styles/theme.js @@ -40,6 +40,7 @@ animationspeed: 0.4, }, breakpoint: { + large: '@media (max-width: 1300px)', medium: '@media (max-width: 920px)', small: '@media (max-width: 520px)', }, @@ -84,6 +85,7 @@ animationspeed: 0.2, }, breakpoint: { + large: '@media (max-width: 1300px)', medium: '@media (max-width: 920px)', small: '@media (max-width: 520px)', },