Built out (functional) hamburger menu

public/footer/Footer.jsx

@@ -22,14 +22,15 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import { NavLink } from 'react-router-dom'
 import { PageBoundary } from './../page/Page';
 
 const FooterLink = function(props) {
   return (
     <span className="c-footer__link">
-      <a href="#">
+      <NavLink to="/about">
         Link
-      </a>
+      </NavLink>
     </span>
   );
 }

public/images/icons/hamburger.svg

@@ -0,0 +1,8 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24">
+  <g fill="#FFFFFF">
+    <path d="M24,3c0-0.6-0.4-1-1-1H1C0.4,2,0,2.4,0,3v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V3z"/>
+    <path d="M24,11c0-0.6-0.4-1-1-1H1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V11z"/>
+    <path d="M24,19c0-0.6-0.4-1-1-1H1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V19z"/>
+  </g>
+</svg>

public/nav/menu/HamburgerMenu.jsx

@@ -0,0 +1,80 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const HamburerMenuItem = function(props) {
+  return (
+    <li className="o-hamburger-menu__link">
+      <NavLink to={ props.to }>Home</NavLink>
+    </li>
+  );
+}
+
+class HamburgerMenu extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state ={
+      open: false
+    }
+
+    this.toggleMenuBound = this.toggleMenu.bind(this);
+  }
+
+  toggleMenu() {
+    this.setState({
+      open: !this.state.open
+    });
+  }
+
+  render() {
+    let clazz = "o-hamburger-menu";
+    if(this.state && this.state.open) clazz += " is-open";
+    if(this.props.className) clazz += " " + this.props.className;
+
+    return (
+      <div className={clazz}>
+        <button
+          type="button"
+          className="o-hamburger-menu__button"
+          onClick={this.toggleMenuBound}
+        >
+          <img
+            src={ require('./../../images/icons/hamburger.svg') }
+            className="o-hamburger-menu__icon"
+          />
+        </button>
+
+        <ul className="o-hamburger-menu__menu">
+          <HamburerMenuItem to="/" />
+          <HamburerMenuItem to="/" />
+          <HamburerMenuItem to="/" />
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default HamburgerMenu;

public/nav/navbar/Navbar.jsx

@@ -27,6 +27,7 @@ import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom'
 import PageBoundary from './../../page/PageBoundary';
 import Language from './../../language/Language';
+import HamburgerMenu from './../menu/HamburgerMenu';
 
 const NavbarLink = function(props) {
   return (
@@ -48,6 +49,7 @@ class Navbar extends React.Component {
         <PageBoundary>
           <nav className="o-navbar__nav">
 
+            {/* Logo */}
             <NavLink to="/" className="o-navbar__logo-container" activeClassName="is-active">
               <img
                 src={ require('./../../images/logo.svg') }
@@ -56,9 +58,13 @@ class Navbar extends React.Component {
               />
             </NavLink>
 
+            {/* Desktop / Tablet Screen Links */}
             <NavbarLink to="/" title="home" exact />
             <NavbarLink to="/about" title="about" />
             <NavbarLink to="/contact" title="contact" exact />
+
+            {/* Hamburger Menu for smaller screens */}
+            <HamburgerMenu className="o-navbar__hamburger" />
           </nav>
         </PageBoundary>
       </section>

public/page/Routes.jsx

@@ -39,7 +39,6 @@ const RouteWrapper = (props) => {
   return (
     <Route {...props} render={() => {
         let CustomTag = props.page;
-        console.log(props);
         return (
           <main className="o-main">
             <CustomTag />

public/page/about/AboutPage.jsx

@@ -65,9 +65,9 @@ const AboutPage = (props) => {
 
             <Split className="u-text-center" padded>
               <ElementScrollFader from="bottom">
-                <Heading1>
+                <Title>
                   { Language.get("pages.about.video.heading") }
-                </Heading1>
+                </Title>
                 <Paragraph>
                   { Language.get("pages.about.video.paragraph") }
                 </Paragraph>

public/styles/index.scss

@@ -66,6 +66,7 @@
 @import './objects/_element-scroll-fader.scss';
 @import './objects/_floating-content-box.scss';
 @import './objects/_form.scss';
+@import './objects/_hamburger-menu.scss';
 @import './objects/_input.scss';
 @import './objects/_loader.scss';
 @import './objects/_navbar.scss';

public/styles/objects/_hamburger-menu.scss

@@ -0,0 +1,52 @@
+/*
+ *  Hamburger Menu
+ *    Mobile-Centric openable menu with a hamburger icon to toggle.
+ *
+ *  Dependencies:
+ *    styles/settings/colors.scss
+ *    styles/settings/z.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/06/12
+ */
+.o-hamburger-menu {
+  border: 1px solid red;
+
+  &__menu {
+    @extend %t-list-blank;
+
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $s-color--menu__background;
+
+    z-index: $s-z--menu;
+  }
+
+  &__link {
+    @extend %t-list-litem-blank;
+  }
+
+  &__button {
+    position: relative;//Helps us win the Z-Fight
+    width: 100%;
+    height: 100%;
+    padding: 0.5em;
+    cursor: pointer;
+    z-index: $s-z--menu-button;
+  }
+
+  &__icon {
+    display: block;
+  }
+
+
+  &.is-open {
+    .o-hamburger-menu__menu {
+      display: block;
+    }
+  }
+}

public/styles/objects/_navbar.scss

@@ -37,7 +37,6 @@ $o-navbar--link-thickness: 5px;
   &__logo-container {
     width: 100%;
     padding: 0.5em;
-    text-align: center;
   }
 
   &__logo {
@@ -81,12 +80,12 @@ $o-navbar--link-thickness: 5px;
     }
   }
 
+  &__hamburger {
+  }
 
   @include t-media-query($s-xsmall-up) {
-    //padding: 1em;
+    &__hamburger {
-
+      display: none;
-    &__logo-container {
-      text-align: left;
     }
 
     &__logo {
@@ -99,6 +98,7 @@ $o-navbar--link-thickness: 5px;
   }
 
   @include t-media-query($s-small-up) {
+
     &__logo {
       width: 12em;
     }

public/styles/settings/colors.scss

@@ -41,6 +41,9 @@ $s-color--navbar__text-hover: #CCC;
 $s-color--navbar__bar-hover: $s-color--pastel-blue;
 $s-color--navbar__bar-active: $s-color--pastel-green;
 
+//Menu Colors
+$s-color--menu__background: red;
+
 //loader
 $s-color--loader: $s-color--swatch-blue;
 

public/styles/settings/z.scss

@@ -3,9 +3,11 @@
  *    Provides Z-Index tracking, for use throughout the theme.
  *
  *  Version:
- *    1.0.0 - 2018/05/07
+ *    1.0.1 - 2018/06/12
  */
 
-$s-z--background: -1;
+$s-z--background: -1;   //Background Element
 $s-z--navbar: 10;       //Navbar
+$s-z--menu: 15;         //Hamburger Menu
+$s-z--menu-button: 16;  //Button to toggle menu.
 $s-z--transition: 1;    //The Z-Index of an element in transition