aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/button.tsx29
-rw-r--r--packages/website/ts/@next/components/header.tsx8
2 files changed, 32 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 5d44f1ce5..3c22f705e 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Link as ReactRouterLink } from 'react-router-dom';
+import { Link as ReactRouterLink, NavLink as ReactRouterNavLink } from 'react-router-dom';
import styled from 'styled-components';
import { BREAKPOINTS } from 'ts/@next/components/layout';
@@ -86,6 +86,33 @@ Link.defaultProps = {
isTransparent: true,
};
+export const NavLink: React.ReactNode = (props: ButtonInterface) => {
+ const {
+ children,
+ href,
+ isWithArrow,
+ } = props;
+ const Component = Button.withComponent(ReactRouterNavLink);
+
+ return (
+ <Component to={href} {...props}>
+ {children}
+
+ { isWithArrow &&
+ <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
+ />
+ </svg>
+ }
+ </Component>
+ );
+};
+
+NavLink.defaultProps = {
+ isTransparent: true,
+};
+
// Added this, & + & doesnt really work since we switch with element types...
export const ButtonWrap = styled.div`
button + button,
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 3d9f2055c..6e9616e21 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components';
import { colors } from 'ts/style/colors';
-import { Button, Link } from 'ts/@next/components/button';
+import { Button, Link, NavLink } from 'ts/@next/components/button';
import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
import { Dropdown } from 'ts/@next/components/dropdowns/mock';
@@ -89,13 +89,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
return (
<Wrapper key={`nav-${index}`}>
- <NavLink
+ <StyledNavLink
href={link.url}
isTransparent={true}
isNoBorder={true}
>
{link.text}
- </NavLink>
+ </StyledNavLink>
{link.dropdownComponent &&
<DropdownWrap width={link.dropdownWidth}>
@@ -169,7 +169,7 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
}
`;
-const NavLink = styled(Link).attrs({
+const StyledNavLink = styled(NavLink).attrs({
activeStyle: { opacity: 1 },
})`
opacity: 0.5;