use gatsby Link instead of a for NavItem (#692)

astroturfcss · Apr 28, 2021 · 4e03374 · 4e03374
1 parent cf1864f
commit 4e03374
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/www/src/components/Layout.tsx b/www/src/components/Layout.tsx
@@ -1,6 +1,7 @@
 import { MDXProvider } from '@mdx-js/react';
 import styled, { css } from 'astroturf/react';
 import React, { useState } from 'react';
+import { Link } from 'gatsby';
 
 import CodeBlock from './CodeBlock';
 
@@ -16,7 +17,7 @@ const Brand = styled('span')`
   font-family: theme('fontFamily.brand');
 `;
 
-const NavItem = styled('a')`
+const NavItem = styled(Link)`
   composes: my-2, inline-block, font-brand, text-xl, text-white, text-shadow-sm, relative from global;
 
   &::before {
@@ -109,11 +110,11 @@ function Layout(props: Props) {
           `}
         `}
       >
-        <NavItem href="/introduction">Introduction</NavItem>
-        <NavItem href="/setup">Setup</NavItem>
-        <NavItem href="/advanced">Advanced features</NavItem>
-        <NavItem href="/migration">Migrating to v1</NavItem>
-        <NavItem href="/tooling">Tooling</NavItem>
+        <NavItem to="/introduction">Introduction</NavItem>
+        <NavItem to="/setup">Setup</NavItem>
+        <NavItem to="/advanced">Advanced features</NavItem>
+        <NavItem to="/migration">Migrating to v1</NavItem>
+        <NavItem to="/tooling">Tooling</NavItem>
       </nav>
       <main
         css={css`