Fix header link active state

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;