diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-18 06:37:34 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-12-18 06:37:34 +0800 |
commit | a77e5a1a127e7e25281ff94c88b7a1a0034613b6 (patch) | |
tree | 414cee916b8c8979100770dfee16ecbac9ecadf2 /packages/website/ts/@next/components/header.tsx | |
parent | 9df0ae90bc98a80100cb254341d124568edd061e (diff) | |
download | dexon-0x-contracts-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar dexon-0x-contracts-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.gz dexon-0x-contracts-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.bz2 dexon-0x-contracts-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.lz dexon-0x-contracts-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.xz dexon-0x-contracts-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.zst dexon-0x-contracts-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.zip |
feat: fix links in navbar and dropdown
Diffstat (limited to 'packages/website/ts/@next/components/header.tsx')
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 85 |
1 files changed, 47 insertions, 38 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 544a7daf1..00d45f123 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,8 +1,8 @@ +import { Link } from '@0x/react-shared'; import _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; -import { NavLink as ReactRouterLink } from 'react-router-dom'; -import styled, { withTheme } from 'styled-components'; +import styled, { css, withTheme } from 'styled-components'; import Headroom from 'react-headroom'; @@ -29,6 +29,7 @@ interface NavItemProps { text?: string; dropdownWidth?: number; dropdownComponent?: React.ReactNode; + shouldOpenInNewTab?: boolean; } interface DropdownWrapInterface { @@ -43,14 +44,12 @@ const navItems: NavItemProps[] = [ }, { id: 'products', - url: '#', text: 'Products', dropdownComponent: DropdownProducts, dropdownWidth: 280, }, { id: 'developers', - url: '#', text: 'Developers', dropdownComponent: DropdownDevelopers, dropdownWidth: 480, @@ -62,7 +61,8 @@ const navItems: NavItemProps[] = [ }, { id: 'blog', - url: 'https://blog.0x.org/latest', + url: 'https://blog.0xproject.com/latest', + shouldOpenInNewTab: true, text: 'Blog', }, ]; @@ -72,7 +72,7 @@ class HeaderBase extends React.Component<HeaderProps> { if (this.props.isNavToggled) { this.props.toggleMobileNav(); } - } + }; public render(): React.ReactNode { const { isNavToggled, toggleMobileNav, theme } = this.props; @@ -81,25 +81,16 @@ class HeaderBase extends React.Component<HeaderProps> { <Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}> <StyledHeader isNavToggled={isNavToggled}> <HeaderWrap> - <ReactRouterLink to={WebsitePaths.Home}> + <Link to={WebsitePaths.Home}> <Logo /> - </ReactRouterLink> + </Link> <NavLinks> - {_.map(navItems, (link, index) => ( - <NavItem - key={`navlink-${index}`} - link={link} - /> - ))} + {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)} </NavLinks> <MediaQuery minWidth={990}> - <TradeButton - bgColor={theme.headerButtonBg} - color="#ffffff" - href="/portal" - > + <TradeButton bgColor={theme.headerButtonBg} color="#ffffff" href="/portal"> Trade on 0x </TradeButton> </MediaQuery> @@ -118,23 +109,30 @@ export const Header = withTheme(HeaderBase); const NavItem = (props: { link: NavItemProps; key: string }) => { const { link } = props; const Subnav = link.dropdownComponent; - + const linkElement = _.isUndefined(link.url) ? ( + <StyledAnchor href="#">{link.text}</StyledAnchor> + ) : ( + <StyledNavLink to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}> + {link.text} + </StyledNavLink> + ); return ( <LinkWrap> - <StyledNavLink to={link.url}> - {link.text} - </StyledNavLink> + {linkElement} - {link.dropdownComponent && + {link.dropdownComponent && ( <DropdownWrap width={link.dropdownWidth}> <Subnav /> </DropdownWrap> - } + )} </LinkWrap> ); }; -const StyledHeader = styled.header<HeaderProps>` +const StyledHeader = + styled.header < + HeaderProps > + ` padding: 30px; background-color: ${props => props.theme.bgColor}; `; @@ -157,9 +155,7 @@ const LinkWrap = styled.li` } `; -const StyledNavLink = styled(ReactRouterLink).attrs({ - activeStyle: { opacity: 1 }, -})` +const linkStyles = css` color: ${props => props.theme.textColor}; opacity: 0.5; transition: opacity 0.35s; @@ -171,15 +167,25 @@ const StyledNavLink = styled(ReactRouterLink).attrs({ } `; +const StyledNavLink = styled(Link).attrs({ + activeStyle: { opacity: 1 }, +})` + ${linkStyles}; +`; + +const StyledAnchor = styled.a` + ${linkStyles}; +`; + const HeaderWrap = styled(FlexWrap)` - justify-content: space-between; - align-items: center; - - @media (max-width: 800px) { - padding-top: 0; - display: flex; - padding-bottom: 0; - } + justify-content: space-between; + align-items: center; + + @media (max-width: 800px) { + padding-top: 0; + display: flex; + padding-bottom: 0; + } `; const NavLinks = styled.ul` @@ -192,7 +198,10 @@ const NavLinks = styled.ul` } `; -const DropdownWrap = styled.div<DropdownWrapInterface>` +const DropdownWrap = + styled.div < + DropdownWrapInterface > + ` width: ${props => props.width || 280}px; padding: 15px 0; border: 1px solid transparent; |