Adding Reusable <NavigationItem/> inside <NavigationItems/>

README.md

@@ -41,3 +41,4 @@ Layout, Component & State Design: **[View](https://codepen.io/ch-sriram/full/JjX
 
 1. Adding a `<Toolbar />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/1f5cf0c1ae06912264691a5bd2cbdaed15d066a8)
 2. Using & Adding a `<Logo />` in our Application: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/fe3e10f5665a6943e2e480ce280ce4afe06355df)
+3. Adding Reusable `<NavigationItem />` inside `<NavigationItems />`: [Commit Details]()

src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.component.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const NavigationItem = styled.div`
+  margin: 0;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  align-items: center;
+
+  & a {
+    color: white;
+    text-decoration: none;
+    height: 100%;
+    padding: 16px 10px;
+    border-bottom: 4px solid transparent;
+    box-sizing: border-box;
+    display: block;
+
+    &:hover,
+    &:active,
+    &.active {
+      background-color: #8F5C2C;
+      border-bottom: 4px solid #40A4C8;
+    }
+  }
+`;
+
+const navigationItem = (props) => (
+  <NavigationItem>
+    <a
+      href={props.link}
+      className={props.active ? 'active' : null}
+    >
+      {props.children}
+    </a>
+  </NavigationItem>
+);
+
+export default navigationItem;

src/components/Navigation/NavigationItems/NavigationItems.component.jsx

@@ -0,0 +1,25 @@
+// LIBRARY IMPORTS
+import React from 'react';
+import styled from 'styled-components';
+
+// CUSTOM COMPONENT
+import NavigationItem from './NavigationItem/NavigationItem.component';
+
+// STYLED UL
+const NavigationItems = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  height: 100%;
+`;
+
+const navigationItems = () => (
+  <NavigationItems>
+    <NavigationItem link="/" active>Burger Builder</NavigationItem>
+    <NavigationItem link="/">Checkout</NavigationItem>
+  </NavigationItems>
+);
+
+export default navigationItems;

src/components/Navigation/Toolbar/Toolbar.component.jsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 // OUR CUSTOM COMPONENTS
 import Logo from '../../Logo/Logo.component';
+import NavigationItems from '../NavigationItems/NavigationItems.component';
 
 // Custom Toolbar
 const Toolbar = styled.header`
@@ -30,7 +31,7 @@ const toolbar = props => (
     <div>MENU</div>
     <Logo />
     <nav>
-      ...
+      <NavigationItems />
     </nav>
   </Toolbar>
 );