aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-12-18 06:37:34 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-12-18 06:37:34 +0800
commita77e5a1a127e7e25281ff94c88b7a1a0034613b6 (patch)
tree414cee916b8c8979100770dfee16ecbac9ecadf2 /packages/website/ts/@next
parent9df0ae90bc98a80100cb254341d124568edd061e (diff)
downloaddexon-sol-tools-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar
dexon-sol-tools-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.gz
dexon-sol-tools-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.bz2
dexon-sol-tools-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.lz
dexon-sol-tools-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.xz
dexon-sol-tools-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.tar.zst
dexon-sol-tools-a77e5a1a127e7e25281ff94c88b7a1a0034613b6.zip
feat: fix links in navbar and dropdown
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/header.tsx85
-rw-r--r--packages/website/ts/@next/components/link.tsx22
2 files changed, 61 insertions, 46 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;
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 (
<StyledLink to={href} {...props}>
{children}
- {!isNoArrow && <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" fill="currentColor"/></svg>}
+ {!isNoArrow && (
+ <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z"
+ fill="currentColor"
+ />
+ </svg>
+ )}
</StyledLink>
);
};
@@ -39,7 +42,10 @@ export const LinkWrap = styled.div`
}
`;
-const StyledLink = styled(ReactRouterLink)<LinkInterface>`
+const StyledLink =
+ styled(SmartLink) <
+ LinkInterface >
+ `
display: ${props => !props.isBlock && 'inline-flex'};
color: ${props => props.color || props.theme.linkColor};
text-align: center;