From a77e5a1a127e7e25281ff94c88b7a1a0034613b6 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 14:37:34 -0800 Subject: feat: fix links in navbar and dropdown --- packages/website/ts/@next/components/header.tsx | 85 ++++++++++++++----------- packages/website/ts/@next/components/link.tsx | 22 ++++--- 2 files changed, 61 insertions(+), 46 deletions(-) (limited to 'packages/website/ts') 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 { 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 { - + - + - {_.map(navItems, (link, index) => ( - - ))} + {_.map(navItems, (link, index) => )} - + Trade on 0x @@ -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) ? ( + {link.text} + ) : ( + + {link.text} + + ); return ( - - {link.text} - + {linkElement} - {link.dropdownComponent && + {link.dropdownComponent && ( - } + )} ); }; -const StyledHeader = styled.header` +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` +const DropdownWrap = + styled.div < + DropdownWrapInterface > + ` width: ${props => props.width || 280}px; padding: 15px 0; border: 1px solid transparent; diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx index c3633987a..6ca1e44c1 100644 --- a/packages/website/ts/@next/components/link.tsx +++ b/packages/website/ts/@next/components/link.tsx @@ -1,5 +1,5 @@ +import { Link as SmartLink } from '@0x/react-shared'; import * as React from 'react'; -import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; interface LinkInterface { @@ -16,16 +16,19 @@ interface LinkInterface { } export const Link = (props: LinkInterface) => { - const { - children, - isNoArrow, - href, - } = props; + const { children, isNoArrow, href } = props; return ( {children} - {!isNoArrow && } + {!isNoArrow && ( + + + + )} ); }; @@ -39,7 +42,10 @@ export const LinkWrap = styled.div` } `; -const StyledLink = styled(ReactRouterLink)` +const StyledLink = + styled(SmartLink) < + LinkInterface > + ` display: ${props => !props.isBlock && 'inline-flex'}; color: ${props => props.color || props.theme.linkColor}; text-align: center; -- cgit v1.2.3