Update, built Contact Page

public/components/navigation/Menu.jsx

@@ -11,14 +11,76 @@
 
 import React from 'react';
 
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import { NavLink } from 'react-router-dom';
+import { faBars } from '@fortawesome/fontawesome-free-solid'
+
+
+const MenuGroup = function(props) {
+  return (
+    <nav className="c-menu__group">
+      <h1 className="c-menu__group-title">{props.title}</h1>
+      {props.children}
+    </nav>
+  )
+}
+
+const MenuItem = function(props) {
+  return (
+    <NavLink className="c-menu__item" to={props.to}>
+      {props.children}
+    </NavLink>
+  )
+}
+
+
 class Menu extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      open: false
+    }
+  }
+
+  toggleMenu() {
+    this.setState({
+      open: !this.state.open
+    });
   }
 
   render() {
+    if(this.state.open) {
+      document.body.classList.add('is-menu-open');
+    } else {
+      document.body.classList.remove('is-menu-open');
+    }
+
+
     return (
-      <nav className="c-menu">
+      <nav className="c-menu__wrapper open">
+        <div className="c-menu">
+          <div className="c-menu__fix">
+            <div className={"c-menu__container" + (this.state.open === true ? " open": "")}>
+              <div className="c-menu__body">
+                <div className="c-menu__fix c-menu__groups">
+
+                  <MenuGroup title="Get in touch">
+                    <MenuItem to="/contact">Contact Me</MenuItem>
+                  </MenuGroup>
+
+                  <MenuGroup title="Legal Stuff">
+                    <MenuItem to="/privacy-policy">Privacy Policy</MenuItem>
+                  </MenuGroup>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button type="button" className="c-menu__button" onClick={this.toggleMenu.bind(this)}>
+          <FontAwesomeIcon icon={faBars} />
+        </button>
       </nav>
     )
   }

public/components/navigation/Navbar.jsx

@@ -11,15 +11,14 @@
  */
 
 import React from 'react';
+import { Link, NavLink } from 'react-router-dom';
+import Menu from './Menu';
 
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
-import { faBars } from '@fortawesome/fontawesome-free-solid'
-
-const NavLink = function(props) {
+const NavbarLink = function(props) {
   return (
-    <a href={props.to} className="c-navbar__link">
+    <NavLink exact to={props.to} className="c-navbar__link" activeClassName="active">
       <span className="c-navbar__link-text">{props.children}</span>
-    </a>
+    </NavLink>
   )
 }
 
@@ -31,17 +30,15 @@ class Navbar extends React.Component {
   render() {
     return (
       <nav className="c-navbar">
-        <button type="button" className="c-navbar__menu-button">
-          <FontAwesomeIcon icon={faBars} />
-        </button>
+        <Menu open />
 
-        <a href="#" className="c-navbar__logo-container">
+        <Link to="/" className="c-navbar__logo-container">
           <img src={ require('./../../images/logo.svg') } className="c-navbar__logo" alt="domsPlace" />
-        </a>
+        </Link>
 
         <div className="c-navbar__links">
-          <NavLink to="/">Home</NavLink>
-          <NavLink to="/contact">Contact</NavLink>
+          <NavbarLink exact to="/">Home</NavbarLink>
+          <NavbarLink to="/contact">Contact</NavbarLink>
         </div>
       </nav>
     )