feat: fix links in navbar and dropdown
This commit is contained in:
fragosti
parent
9df0ae90bc
commit
a77e5a1a12
@ -1,13 +1,13 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { Link as ReactRounterLink } from 'react-router-dom';
|
||||
import { NavLink as ReactRounterLink } from 'react-router-dom';
|
||||
import { Link as ScrollLink } from 'react-scroll';
|
||||
import * as validUrl from 'valid-url';
|
||||
|
||||
import { LinkType } from '../types';
|
||||
import { constants } from '../utils/constants';
|
||||
|
||||
interface BaseLinkProps {
|
||||
export interface BaseLinkProps {
|
||||
to: string;
|
||||
shouldOpenInNewTab?: boolean;
|
||||
className?: string;
|
||||
@ -18,11 +18,15 @@ interface BaseLinkProps {
|
||||
fontColor?: string;
|
||||
}
|
||||
|
||||
interface ScrollLinkProps extends BaseLinkProps {
|
||||
export interface ScrollLinkProps extends BaseLinkProps {
|
||||
onActivityChanged?: (isActive: boolean) => void;
|
||||
}
|
||||
|
||||
type LinkProps = BaseLinkProps & ScrollLinkProps;
|
||||
export interface ReactLinkProps extends BaseLinkProps {
|
||||
activeStyle?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export type LinkProps = ReactLinkProps & ScrollLinkProps;
|
||||
|
||||
export interface LinkState {}
|
||||
|
||||
@ -94,6 +98,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
|
||||
onMouseOver={this.props.onMouseOver}
|
||||
onMouseEnter={this.props.onMouseEnter}
|
||||
onMouseLeave={this.props.onMouseLeave}
|
||||
activeStyle={this.props.activeStyle}
|
||||
>
|
||||
{this.props.children}
|
||||
</ReactRounterLink>
|
||||
|
||||
@ -3,7 +3,7 @@ export { MarkdownLinkBlock } from './components/markdown_link_block';
|
||||
export { MarkdownCodeBlock } from './components/markdown_code_block';
|
||||
export { MarkdownSection } from './components/markdown_section';
|
||||
export { SectionHeader } from './components/section_header';
|
||||
export { Link } from './components/link';
|
||||
export { Link, LinkProps } from './components/link';
|
||||
|
||||
export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';
|
||||
|
||||
|
||||
@ -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 HeaderWrap = styled(FlexWrap)`
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
const StyledNavLink = styled(Link).attrs({
|
||||
activeStyle: { opacity: 1 },
|
||||
})`
|
||||
${linkStyles};
|
||||
`;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
||||
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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user