component: add resuable NavigationItem component

src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css

@@ -0,0 +1,25 @@
+.NavigationItem {
+    margin: 0;
+    box-sizing: border-box;
+    display: flex;
+    height: 100%;
+    align-items: center;
+}
+
+
+.NavigationItem a{
+    color: white;
+    text-decoration: none;
+    height: 100%;
+    padding: 16px 10px;
+    border-bottom: 4px solid transparent;
+    box-sizing: border-box;
+    display: block;
+}
+
+.NavigationItem a:hover,
+.NavigationItem a:active,
+.NavigationItem a.active {
+    background-color: #8f5c2c;
+    border-bottom: 4px solid #40a4c8;
+}

src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import classes from './NavigationItem.css';
+
+const navigationItem = (props) => (
+    <li className={classes.NavigationItem}>
+        <a href={props.link}
+            className={props.active ? classes.active : null}>
+            {props.children}
+        </a>
+    </li>
+)
+
+export default navigationItem;

src/components/Navigation/NavigationItems/NavigationItems.css

@@ -0,0 +1,8 @@
+.NavigationItems {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    height: 100%;
+}

src/components/Navigation/NavigationItems/NavigationItems.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import NavigationItem from './NavigationItem/NavigationItem';
+import classes from './NavigationItems.css';
+
+const navigationItems = () => (
+    <ul className={classes.NavigationItems}>
+        <NavigationItem link="/" active>Burger Builder</NavigationItem>
+        <NavigationItem link="/">Checkout</NavigationItem>
+    </ul>
+)
+
+export default navigationItems

src/components/Navigation/Toolbar/Toolbar.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import classes from './Toolbar.css';
 import Logo from '../../Logo/Logo';
+import NavigationItems from '../NavigationItems/NavigationItems';
 
 const toolbar = () => {
     return (
@@ -9,7 +10,7 @@ const toolbar = () => {
             <div>MENU</div>
             <Logo />
             <nav>
-                ...
+                <NavigationItems />
             </nav>
         </header>
     )