diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 23:18:10 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 23:18:27 +0800 |
commit | bc64c9566c4f1410dc7c22e287533473a6052085 (patch) | |
tree | 4bd7f7a4faed4f15b45a44adbf5ba6508ae9470e /packages/website/ts/@next/components/header.tsx | |
parent | d068956b695b1eef7a721e9b428375e73380c747 (diff) | |
download | dexon-0x-contracts-bc64c9566c4f1410dc7c22e287533473a6052085.tar dexon-0x-contracts-bc64c9566c4f1410dc7c22e287533473a6052085.tar.gz dexon-0x-contracts-bc64c9566c4f1410dc7c22e287533473a6052085.tar.bz2 dexon-0x-contracts-bc64c9566c4f1410dc7c22e287533473a6052085.tar.lz dexon-0x-contracts-bc64c9566c4f1410dc7c22e287533473a6052085.tar.xz dexon-0x-contracts-bc64c9566c4f1410dc7c22e287533473a6052085.tar.zst dexon-0x-contracts-bc64c9566c4f1410dc7c22e287533473a6052085.zip |
Header changes, mobile alignments
Diffstat (limited to 'packages/website/ts/@next/components/header.tsx')
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 39 |
1 files changed, 32 insertions, 7 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index b0dabf98d..73f615643 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -36,7 +36,11 @@ const mobileProductLinks = [ ]; const navItems: NavItem[] = [ - { id: 'why', url: '/next/why', text: 'Why 0x' }, + { + id: 'why', + url: '/next/why', + text: 'Why 0x', + }, { id: 'products', url: '/next/0x-instant', @@ -49,10 +53,18 @@ const navItems: NavItem[] = [ url: '#', text: 'Developers', dropdownComponent: DropdownDevelopers, - dropdownWidth: 450, + dropdownWidth: 480, + }, + { + id: 'about', + url: '/next/about/mission', + text: 'About', + }, + { + id: 'blog', + url: '#', + text: 'Blog', }, - { id: 'about', url: '/next/about/mission', text: 'About' }, - { id: 'blog', url: '#', text: 'Blog' }, ]; class HeaderBase extends React.Component<HeaderProps, HeaderState> { @@ -72,13 +84,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { return ( <Wrapper key={`nav-${index}`}> - <Link + <NavLink href={link.url} isTransparent={true} isNoBorder={true} > {link.text} - </Link> + </NavLink> {link.dropdownComponent && <DropdownWrap width={link.dropdownWidth}> @@ -118,7 +130,9 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { </MobileProductLinksWrap> <StyledButtonWrap> - {_.map(navItems, (link, index) => this.getNavItem(link, index))} + {_.map(navItems, (link, index) => ( + this.getNavItem(link, index) + ))} </StyledButtonWrap> </Nav> @@ -152,6 +166,17 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` } `; +const NavLink = styled(Link).attrs({ + activeStyle: { opacity: 1 }, +})` + opacity: 0.5; + transition: opacity 0.35s; + + &:hover { + opacity: 1; + } +`; + const HeaderWrap = styled(Wrap)` justify-content: space-between; align-items: center; |