feat: add initial style to the top mega ultra super nice menu

this fixes #41 Co-authored-by: Razvan-Victor Mocanu <[email protected]> Co-authored-by: Filip Cornel-Cristian <[email protected]> Co-authored-by: Catalin Sandru <[email protected]>
codetapacademy · Jul 17, 2019 · d73f172 · d73f172
1 parent 99e192b
commit d73f172
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/src/component/top-menu/top-menu.component.jsx b/src/component/top-menu/top-menu.component.jsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Link } from '@reach/router'
+import { StyledTopMenu, StyledLink } from './top-menu.style'
 
 const TopMenu = () => {
   return (
-    <div>
-      <Link to="/">Home</Link>
-      <Link to="/dashboard">Dashboard</Link>
+    <StyledTopMenu>
+      <StyledLink to="/">Home</StyledLink>
+      <StyledLink to="/dashboard">Dashboard</StyledLink>
       <button>Log in</button>
-    </div>
+    </StyledTopMenu>
   )
 }
 

diff --git a/src/component/top-menu/top-menu.style.js b/src/component/top-menu/top-menu.style.js
@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import { Link } from '@reach/router'
+
+export const StyledLink = styled(Link)`
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  color: white;
+  transition: 0.25s;
+
+  &:hover {
+    color: #c00;
+    background-color: white;
+  }
+`
+
+export const StyledTopMenu = styled.div`
+  background-color: #d52027;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  display: flex;
+  justify-content: space-evenly;
+`