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 (
+

SOLUCIONARIO - POSCOMP

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 }) => +
+ +
+ +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 }) => + + {label} + + + +export default MenuOption;