From 3858efa0316e23e58856857d1b280924b82259ba Mon Sep 17 00:00:00 2001
From: edumoreira1506 <contato@eduardoem.com.br>
Date: Thu, 7 Nov 2019 15:02:33 -0300
Subject: [PATCH] Added a navigation menu

---
 src/components/header/PageHeader.js | 11 ++++++++++
 src/components/menu/Menu.css        | 31 +++++++++++++++++++++++++++++
 src/components/menu/Menu.js         | 21 +++++++++++++++++++
 src/components/menu/MenuOption.js   |  9 +++++++++
 4 files changed, 72 insertions(+)
 create mode 100644 src/components/menu/Menu.css
 create mode 100644 src/components/menu/Menu.js
 create mode 100644 src/components/menu/MenuOption.js

diff --git a/src/components/header/PageHeader.js b/src/components/header/PageHeader.js
index f4e9ad6..5dbff3f 100644
--- a/src/components/header/PageHeader.js
+++ b/src/components/header/PageHeader.js
@@ -2,10 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './PageHeader.css';
 import ToggleButton from '../toggleButton/ToggleButton';
+import Menu from '../menu/Menu';
+
+const menuOptions = [
+  {
+    label: 'Home',
+    link: '/'
+  }
+];
 
 const PageHeader = ({ drawerClickHandler }) => {
   return (
     <header className="page-header">
+      <Menu 
+        options={menuOptions}
+      />
       <ToggleButton className="header-toggle-button" click={drawerClickHandler} />
       <h1>SOLUCIONARIO - POSCOMP</h1>
     </header>
diff --git a/src/components/menu/Menu.css b/src/components/menu/Menu.css
new file mode 100644
index 0000000..7222ada
--- /dev/null
+++ b/src/components/menu/Menu.css
@@ -0,0 +1,31 @@
+ul, li {
+  list-style-type:none;
+}
+.Menu--container {
+  display: block;
+  width: 100%;
+  height: 50px;
+  text-align: right;
+  background: #000;
+  color: #fff;
+  border-radius: 25px;
+}
+.Menu__option {
+  height: 100%;
+  display: inline-block;
+  padding: 16px;
+  -webkit-transition: ease-in-out .2s;
+	-o-transition: ease-in-out .2s;
+  transition: ease-in-out .2s;
+  border-radius: 30px;
+}
+.Menu__option:hover {
+  color: #000;
+  background: #fff;
+  cursor: pointer;
+}
+.MenuOption {
+  color: inherit;
+  text-decoration: none;
+  text-transform: uppercase;
+}
diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
new file mode 100644
index 0000000..99fb562
--- /dev/null
+++ b/src/components/menu/Menu.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import MenuOption from './MenuOption';
+import './Menu.css';
+
+const Menu = ({ options }) =>
+  <div className="Menu--container">
+    <ul className="Menu__options">
+      {
+        options.map(({ label, link }) =>
+          <li className="Menu__option">
+            <MenuOption
+              label={label}
+              link={link}
+            />
+          </li>
+        )
+      }
+    </ul>
+  </div>
+
+export default Menu;
diff --git a/src/components/menu/MenuOption.js b/src/components/menu/MenuOption.js
new file mode 100644
index 0000000..749a84d
--- /dev/null
+++ b/src/components/menu/MenuOption.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const MenuOption = ({ label, link }) =>
+  <a href={link} className="MenuOption">
+    {label}
+  </a>
+
+
+export default MenuOption;