From 67a49ad12bc37da7df5f6e11befdc078e5ebece3 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sun, 13 Dec 2020 15:41:29 +1300
Subject: [PATCH] component: add resuable NavigationItem component

---
 .../NavigationItem/NavigationItem.css         | 25 +++++++++++++++++++
 .../NavigationItem/NavigationItem.js          | 14 +++++++++++
 .../NavigationItems/NavigationItems.css       |  8 ++++++
 .../NavigationItems/NavigationItems.js        | 13 ++++++++++
 src/components/Navigation/Toolbar/Toolbar.js  |  3 ++-
 5 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css
 create mode 100644 src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.js
 create mode 100644 src/components/Navigation/NavigationItems/NavigationItems.css
 create mode 100644 src/components/Navigation/NavigationItems/NavigationItems.js

diff --git a/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css b/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css
new file mode 100644
index 0000000..8133516
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.js b/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.js
new file mode 100644
index 0000000..ac8095d
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/Navigation/NavigationItems/NavigationItems.css b/src/components/Navigation/NavigationItems/NavigationItems.css
new file mode 100644
index 0000000..a3fe703
--- /dev/null
+++ b/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%;
+}
\ No newline at end of file
diff --git a/src/components/Navigation/NavigationItems/NavigationItems.js b/src/components/Navigation/NavigationItems/NavigationItems.js
new file mode 100644
index 0000000..c1db0aa
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/Navigation/Toolbar/Toolbar.js b/src/components/Navigation/Toolbar/Toolbar.js
index 1d429e6..f5ab3c6 100644
--- a/src/components/Navigation/Toolbar/Toolbar.js
+++ b/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>
     )