1 files changed, 3 insertions, 62 deletions

diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index 1e39762..89a7c4c 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -7,73 +7,14 @@ import CartCount from './CartCount';
 import Signout from './Signout';
 import { ApolloConsumer } from 'react-apollo';
 
-const StyledNav = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  justify-self: end;
-  font-size: 2rem;
-  a,
-  button {
-    padding: 1rem 3rem;
-    display: flex;
-    align-items: center;
-    position: relative;
-    text-transform: uppercase;
-    font-weight: 900;
-    font-size: 1em;
-    background: none;
-    border: 0;
-    cursor: pointer;
-    @media (max-width: 700px) {
-      font-size: 10px;
-      padding: 0 10px;
-    }
-    &:before {
-      content: '';
-      width: 2px;
-      background: ${props => props.theme.lightgrey};
-      height: 100%;
-      left: 0;
-      position: absolute;
-      transform: skew(-20deg);
-      top: 0;
-      bottom: 0;
-    }
-    &:after {
-      height: 2px;
-      background: red;
-      content: '';
-      width: 0;
-      position: absolute;
-      transform: translateX(-50%);
-      transition: width 0.4s;
-      transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
-      left: 50%;
-      margin-top: 2rem;
-    }
-    &:hover,
-    &:focus {
-      outline: none;
-      &:after {
-        width: calc(100% - 60px);
-      }
-    }
-  }
-  @media (max-width: 1300px) {
-    border-top: 1px solid ${props => props.theme.lightgrey};
-    width: 100%;
-    justify-content: center;
-    font-size: 1.5rem;
-  }
-`;
+import NavStyles from './styles/NavStyles';
 
 class Nav extends React.Component {
   render() {
     return (
       <Query query={CURRENT_USER_QUERY}>
         {({ data: { me } }) => (
-          <StyledNav data-test="nav">
+          <NavStyles data-test="nav">
             <Link href="/items">
               <a>Shop</a>
             </Link>
@@ -109,7 +50,7 @@ class Nav extends React.Component {
                 </ApolloConsumer>
               </Fragment>
             )}
-          </StyledNav>
+          </NavStyles>
         )}
       </Query>
     );