From 52eae544f086993e8b807356b7d15096cb67f066 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Sun, 9 Jun 2019 20:49:00 +1000
Subject: [PATCH] Rebuilt navigation system.

---
 src/public/app/domsPlaceApp.tsx               |   4 +-
 src/public/assets/icons/icon-close.svg        |   3 +
 src/public/assets/icons/icon-hamburger.svg    |   4 +-
 src/public/components/layout/footer/index.tsx |   4 +-
 .../components/layout/footer/styles.scss      |  56 ++++-----
 .../layout/header/hamburger/index.tsx         | 112 ++++++++++++++++++
 .../layout/header/hamburger/styles.scss       |  71 +++++++++++
 src/public/components/layout/header/index.tsx |  60 +++++-----
 .../components/layout/header/nav/index.tsx    |  61 ++++++++++
 .../components/layout/header/nav/styles.scss  |  55 +++++++++
 .../components/layout/header/styles.scss      | 104 +++++-----------
 src/public/components/layout/layout/index.tsx |  38 +++---
 .../components/layout/layout/styles.scss      |  21 +++-
 src/public/components/page/styles.scss        |   6 +-
 src/public/pages/home/index.tsx               |  11 +-
 src/public/styles/settings/z.scss             |   1 +
 yarn.lock                                     |  97 +++++++++------
 17 files changed, 497 insertions(+), 211 deletions(-)
 create mode 100644 src/public/assets/icons/icon-close.svg
 create mode 100644 src/public/components/layout/header/hamburger/index.tsx
 create mode 100644 src/public/components/layout/header/hamburger/styles.scss
 create mode 100644 src/public/components/layout/header/nav/index.tsx
 create mode 100644 src/public/components/layout/header/nav/styles.scss

diff --git a/src/public/app/domsPlaceApp.tsx b/src/public/app/domsPlaceApp.tsx
index 1625f28..a25d568 100644
--- a/src/public/app/domsPlaceApp.tsx
+++ b/src/public/app/domsPlaceApp.tsx
@@ -30,7 +30,7 @@ import { domsPlaceState } from './../state/';
 import { domsPlaceActions } from './../actions/';
 import { domsPlaceReducer } from './../reducer/';
 
-import { Layout } from './../components/layout/layout';
+import { LayoutComponent } from './../components/layout/layout';
 
 export class domsPlaceApp extends App<domsPlaceState, domsPlaceActions> {
   constructor() {
@@ -41,7 +41,7 @@ export class domsPlaceApp extends App<domsPlaceState, domsPlaceActions> {
 
   getComponent() {
     return (
-      <Layout history={this.history} />
+      <LayoutComponent history={this.history} />
     );
   }
 }
diff --git a/src/public/assets/icons/icon-close.svg b/src/public/assets/icons/icon-close.svg
new file mode 100644
index 0000000..2520ab7
--- /dev/null
+++ b/src/public/assets/icons/icon-close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <path d="M9.2 6.3L6.3 9.2 22.2 25l-16 16L9 43.8l16-16 16 16 2.8-2.9-16-15.9L43.7 9.2l-2.9-2.9L25 22.2z"/>
+</svg>
diff --git a/src/public/assets/icons/icon-hamburger.svg b/src/public/assets/icons/icon-hamburger.svg
index 0955bc0..beeef83 100644
--- a/src/public/assets/icons/icon-hamburger.svg
+++ b/src/public/assets/icons/icon-hamburger.svg
@@ -1 +1,3 @@
-<svg height="32" version="1" width="32" xmlns="http://www.w3.org/2000/svg"><path fill="#000" d="M1 7h30a1 1 0 0 0 0-2H1a1 1 0 0 0 0 2zM31 15H1a1 1 0 0 0 0 2h30a1 1 0 0 0 0-2zM31 25H1a1 1 0 0 0 0 2h30a1 1 0 0 0 0-2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+  <path d="M2 11h20v2H2zM2 5h20v2H2zM2 17h20v2H2z" fill="#FFF" />
+</svg>
diff --git a/src/public/components/layout/footer/index.tsx b/src/public/components/layout/footer/index.tsx
index 9ede43e..da9626b 100644
--- a/src/public/components/layout/footer/index.tsx
+++ b/src/public/components/layout/footer/index.tsx
@@ -59,12 +59,12 @@ export class Footer extends React.Component<FooterProps, FooterState> {
   render() {
     return (
       <footer {...this.props} className={`c-footer ${this.props.className||""}`}>
-        <Logo className="c-footer__logo" />
-
         <span className="c-footer__copyright">
           &copy; 2012 ~ { this.state.now.getFullYear() } Dominic Masters
         </span>
 
+        <Logo className="c-footer__logo" />
+
         <nav className="c-footer__navigation">
           <FooterLink to="/contact">Contact Me</FooterLink>
           <FooterLink to="/legal/privacy">Privacy Policy</FooterLink>
diff --git a/src/public/components/layout/footer/styles.scss b/src/public/components/layout/footer/styles.scss
index 7908707..c4cc4fd 100644
--- a/src/public/components/layout/footer/styles.scss
+++ b/src/public/components/layout/footer/styles.scss
@@ -9,14 +9,11 @@
   padding: $s-gutter--small;
   background: $s-color--background-footer;
 
-  &__logo {
-    display: none;
+  &__copyright,
+  &__navigation {
+    font-family: $s-font--family-heading;
     width: 100%;
-  }
-
-  &__copyright,&__navigation {
-    width: 100%;
-    font-size: 0.8em;
+    font-size: 0.75em;
     margin-bottom: 1em;
     text-align: center;
   }
@@ -40,35 +37,38 @@
     }
   }
 
-  @include t-media-query($s-xsmall-up) {
-    &__logo {
-      display: block;
-      width: 100%;
+  &__logo {
+    display: none;
+    align-items: center;
+    height: 100%;
+    width: auto;
 
-      img {
-        width: 120px;
-        margin: 0 auto;
-      }
-    }
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
 
-    &__copyright,&__navigation {
+    img { width: 120px; margin: auto; }
+  }
+
+  @include t-media-query($s-small-up) {
+    &__copyright,
+    &__navigation {
       width: auto;
       margin: 0;
     }
-  }
 
-  /* Specific for the footer, I want the logo to go down and be centered */
-  @media screen and (min-width: 620px) {
     &__logo {
       display: flex;
-      align-items: center;
-      height: 100%;
-      width: auto;
-
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
     }
   }
+
+  @include t-media-query($s-medium-up) {
+    &__copyright,
+    &__navigation {
+      font-size: 1em;
+    }
+
+    &__logo img { width: 150px; }
+  }
 }
diff --git a/src/public/components/layout/header/hamburger/index.tsx b/src/public/components/layout/header/hamburger/index.tsx
new file mode 100644
index 0000000..b812bc8
--- /dev/null
+++ b/src/public/components/layout/header/hamburger/index.tsx
@@ -0,0 +1,112 @@
+// Copyright (c) 2019 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 * as React from 'react';
+import { Image, Link, LinkProps } from '@yourwishes/app-simple-react/dist/public/';
+
+import './styles.scss';
+
+
+export interface MenuLinkProps extends LinkProps {
+  to:string,
+  title:string,
+  exact?:boolean
+};
+
+export const MenuLink = (props:MenuLinkProps) => {
+  return (
+    <Link className="c-hamburger__link" {...props} activeClassName="is-active">
+      { props.title }
+    </Link>
+  );
+};
+
+
+export interface HamburgerMenuProps { className?:string, links:MenuLinkProps[] }
+export interface HamburgerMenuState { open:boolean }
+
+export class HamburgerMenu extends React.Component<HamburgerMenuProps, HamburgerMenuState> {
+  menu:HTMLDivElement;
+  clickEvent;
+
+  constructor(props:HamburgerMenuProps) {
+    super(props);
+
+    this.clickEvent = this.onClickMenu.bind(this);
+    this.state = { open: false };
+  }
+
+  componentDidMount() {
+    this.menu.addEventListener('click', this.clickEvent);
+  }
+
+  componentWillUnmount() {
+    this.menu.removeEventListener('click', this.clickEvent);
+  }
+
+  onClick(e:React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    this.setState({ open: !this.state.open });
+  }
+
+  onClickMenu(e:MouseEvent) {
+    if(e.target !== this.menu) return;
+    e.preventDefault();
+    this.setState({ open: !this.state.open });
+  }
+
+  onItemClick(e:React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+    console.log('oof');
+    this.setState({ open: false });
+  }
+
+  render () {
+    let { className, links } = this.props;
+    let { open } = this.state;
+
+    return (
+      <nav className={`c-hamburger ${className||""} ${open?'is-open':'is-closed'}`}>
+        <button className="c-hamburger__btn" type="button" onClick={e => this.onClick(e)}>
+          <div className="c-hamburger__btn-inner">
+            <Image
+              src={require('./../../../../assets/icons/icon-hamburger.svg')}
+              className="c-hamburger__btn-icon is-open"
+            />
+
+            <Image
+              src={require('./../../../../assets/icons/icon-close.svg')}
+              className="c-hamburger__btn-icon is-close"
+            />
+          </div>
+        </button>
+
+        <div className="c-hamburger__menu" ref={e => this.menu = e }>
+          <div className="c-hamburger__menu-body">
+            { links.map((link,i) =>
+              <MenuLink {...link} key={i} onClick={e => this.onItemClick(e)} />
+            )}
+          </div>
+        </div>
+      </nav>
+    );
+  }
+};
diff --git a/src/public/components/layout/header/hamburger/styles.scss b/src/public/components/layout/header/hamburger/styles.scss
new file mode 100644
index 0000000..5eb2316
--- /dev/null
+++ b/src/public/components/layout/header/hamburger/styles.scss
@@ -0,0 +1,71 @@
+@import './../../../../styles/global';
+
+.c-hamburger {
+  $self: &;
+
+  &__btn {
+    display: inline-block;
+    padding: $s-gutter--xsmall;
+
+    &-inner {
+      position: relative;
+    }
+
+    &-icon{
+      transition: all $s-animation--time-fast $s-animation--ease-out;
+      z-index: $s-z--menu + 1;
+
+      &.is-close {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        heigth: 100%;
+        opacity: 0;
+      }
+    }
+
+    #{$self}.is-open & {
+      &-icon {
+        opacity: 0;
+        &.is-close { opacity: 1; }
+      }
+    }
+  }
+
+  &__menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    transform: translateX(-100%);
+    transition: all $s-animation--time-fast $s-animation--ease-out;
+    z-index: $s-z--menu;
+
+    &-body {
+      width: 100%;
+      height: 100%;
+      background: white;
+      max-width: 300px;
+      padding-top: $s-gutter--large;
+    }
+
+    #{$self}.is-open & {
+      transform: translateX(0);
+      &-body {
+        box-shadow: 0px 0px 2em rgba(0,0,0,0.9);
+      }
+    }
+  }
+
+  &__link {
+    display: block;
+    padding: $s-gutter--small $s-gutter--small;
+    border-left: 0.4em solid transparent;
+    color: black;
+
+    &.is-active { border-color: $s-color--primary; }
+  }
+}
diff --git a/src/public/components/layout/header/index.tsx b/src/public/components/layout/header/index.tsx
index 97067cb..50c15c4 100644
--- a/src/public/components/layout/header/index.tsx
+++ b/src/public/components/layout/header/index.tsx
@@ -22,62 +22,62 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import * as React from 'react';
-import { Link, Image } from '@yourwishes/app-simple-react/dist/public';
 import { Logo } from './../../../objects/logo/';
+import { HamburgerMenu } from './hamburger/';
+import { HeaderNav } from './nav/';
 
 import './styles.scss';
 
-//Social Icon
-export interface HeaderSocialIconProps {
-  to:string,
-  className?:string,
-  icon:string,
-  title:string
-};
-export const HeaderSocialIcon = (props:HeaderSocialIconProps) => (
-  <Link to={props.to} className={`c-header__social-icon ${props.className||""} is-${props.icon}`}>
-    <Image src={ require('./../../../assets/icons/icon-'+props.icon+'.svg') } className="c-header__social-icon-image" />
-    <span className="c-header__social-icon-label">
-      { props.title }
-    </span>
-  </Link>
-);
+export const Links = [
+  { title: 'Home', exact: true, to: '/' },
+  { title: 'About', exact: true, to: '/about' },
+  { title: 'Blog', exact: true, to: '/blog' },
+  { title: 'Contact', to: '/contact' }
+];
+
 
-//Header
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> { }
-export interface HeaderState { now:Date }
+export interface HeaderState {
+  now:Date
+}
 
 export class Header extends React.Component<HeaderProps, HeaderState> {
-  interval:NodeJS.Timeout;
+  time:NodeJS.Timeout;
 
   constructor(props:HeaderProps) {
     super(props);
-    this.state = { now: new Date() }
+
+    this.state = {
+      now: new Date()
+    };
   }
 
   componentDidMount() {
-    this.interval = setInterval(() => this.setState({ now: new Date() }), 1000);
+    this.time = setInterval(() => {
+      this.setState({ now: new Date() });
+    }, 500);
   }
 
   componentWillUnmount() {
-    if(this.interval) clearInterval(this.interval);
+    if(this.time) clearInterval(this.time);
   }
 
   render() {
     let { className } = this.props;
     let { now } = this.state;
+
+    let pz = (n:number) => (`${n}`).padStart(2,'0');
+
     return (
       <header {...this.props} className={`c-header ${className||""}`}>
-        <time dateTime={now.toString()} className="c-header__time">
-          { now.getHours() }<span className="c-header__time-colon">:</span>{ `${now.getMinutes()}`.padStart(2, '0') }
-        </time>
-
+        <HamburgerMenu className="c-header__hamburger" links={Links}  />
         <Logo className="c-header__logo" />
+        <HeaderNav className="c-header__nav" links={Links}  />
 
-        <div className="c-header__social">
-          <HeaderSocialIcon to="//github.com/YourWishes" icon="github" title="GitHub" />
-        </div>
+        <span className="c-header__time">
+          {pz(now.getHours())}<span className="c-header__time-colon">:</span>{pz(now.getMinutes())}
+        </span>
       </header>
     );
   }
-};
+}
diff --git a/src/public/components/layout/header/nav/index.tsx b/src/public/components/layout/header/nav/index.tsx
new file mode 100644
index 0000000..942212e
--- /dev/null
+++ b/src/public/components/layout/header/nav/index.tsx
@@ -0,0 +1,61 @@
+// Copyright (c) 2019 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 * as React from 'react';
+import { Link } from '@yourwishes/app-simple-react/dist/public';
+import './styles.scss';
+
+export interface HeaderNavLinkProps {
+  to:string,
+  title:string,
+  exact?:boolean
+}
+
+export const HeaderNavLink = (props:HeaderNavLinkProps) => {
+
+  return (
+    <Link
+      className="c-header-nav__link" to={props.to} title={props.title}
+      activeClassName="is-active" exact={props.exact}
+    >
+      <span className="c-header-nav__link-inner">
+        { props.title }
+      </span>
+    </Link>
+  );
+};
+
+export interface HeaderNavProps {
+  className?:string,
+  links:HeaderNavLinkProps[]
+};
+
+export const HeaderNav = (props:HeaderNavProps) => {
+  let { className, links } = props;
+
+  return <nav className={`c-header-nav ${className||""}`}>
+    { links.map((link,i) =>
+      <HeaderNavLink {...link} key={i} />
+    )}
+  </nav>
+};
diff --git a/src/public/components/layout/header/nav/styles.scss b/src/public/components/layout/header/nav/styles.scss
new file mode 100644
index 0000000..d372a8d
--- /dev/null
+++ b/src/public/components/layout/header/nav/styles.scss
@@ -0,0 +1,55 @@
+@import './../../../../styles/global';
+
+.c-header-nav {
+  $self: &;
+
+  display: flex;
+  flex-direction: column;
+  width: 75px;
+
+  &__link {
+    padding-bottom: 100%;
+    position: relative;
+    width: 100%;
+
+    border: 0.2em solid transparent;
+
+
+    &,&-inner {
+      transition: all $s-animation--time-fast $s-animation--ease-out;
+    }
+
+    &-inner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      position: absolute;
+      height: 100%;
+      width: 100%;
+
+      font-family: $s-font--family-heading;
+    }
+
+    &:hover #{$self}__link-inner {
+      transform: translateX(5%);
+    }
+
+    &.is-active {
+      border-right-color: $s-color--primary;
+    }
+  }
+
+  &__nav {
+
+  }
+
+  @include t-media-query($s-small-up) {
+    width: 100px;
+    &__link-inner { font-size: $s-font--size-4; }
+  }
+
+  @include t-media-query($s-large-up) {
+    width: 125px;
+  }
+}
diff --git a/src/public/components/layout/header/styles.scss b/src/public/components/layout/header/styles.scss
index f5f55e6..e42a9de 100644
--- a/src/public/components/layout/header/styles.scss
+++ b/src/public/components/layout/header/styles.scss
@@ -6,98 +6,52 @@
   100% { opacity: 1;}
 }
 
-$c-header--spacing: $s-gutter--small;
-
 .c-header {
-  padding: $c-header--spacing;
-  z-index: $s-z--header;
-
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: wrap;
+  align-items: center;
+  padding: $s-gutter--small $s-gutter--xsmall;
 
-  &__time{
-    font-size: 0.75em;
-    position: absolute;
-
-    &-colon { animation: 2s c-header--time-tick infinite step-end; }
+  &__hamburger,
+  &__time {
+    flex-basis: (100% - 55%) / 2;
   }
 
   &__logo {
     width: 100%;
+    flex-basis: 55%;
 
     img {
-      width: 60%;
-      max-width: 250px;
+      display: block;
+      max-width: 175px;
       margin: 0 auto;
     }
   }
 
-  &__social {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-top: $s-gutter--xsmall;
-
-    &-icon {
-      display: flex;
-      align-items: center;
-      margin: 0 0.5em;
-
-      &-image {
-        width: 2em;
-        height: 2em;
-        padding: 0.25em;
-        border-radius: 50%;
-        overflow: hidden;
-      }
-
-      &-label {
-        display: none;
-        max-width: 0;
-        overflow: hidden;
-        transition: all $s-animation--time-medium $s-animation--ease-out;
-      }
-
-      &:hover > .c-header__social-icon-label {
-        max-width: 100px;
-        padding-left: 0.5em;
-      }
-
-      /* Social Specific Styles */
-      &.is-github #{&}-image { background: $s-social--github-background; }
-    }
+  &__time {
+    text-align: right;
+    padding: $s-gutter--xsmall;
+    &-colon { animation: 2s c-header--time-tick infinite step-end; }
   }
 
+  &__nav { display: none; }
+
+
   @include t-media-query($s-xsmall-up) {
     padding: 0;
+    flex-direction: column;
+    background: $s-color--background-footer;
+
+    &__nav {
+      display: flex;
+      flex-grow: 1;
+    }
+
+    &__hamburger,
+    &__time {
+      flex-basis: auto;
+      display: none;
+    }
+
     &__logo { display: none; }
-
-    &__time{
-      font-size: 1em;
-      top: $c-header--spacing;
-      left: $c-header--spacing;
-    }
-
-    &__social {
-      position: absolute;
-      top: $c-header--spacing;
-      right: $c-header--spacing;
-      width: auto;
-      margin-top: 0;
-
-      &-icon {
-        padding: 0.5em 0;
-        margin: 0;
-        padding-right: $s-gutter--small;
-
-        &:first-child { padding-top: 0; }
-        &:last-child { padding-bottom: 0; }
-
-        &-image { width: 2.5em; height: 2.5em; }
-        &-label { display: inline-block; }
-      }
-    }
   }
 }
diff --git a/src/public/components/layout/layout/index.tsx b/src/public/components/layout/layout/index.tsx
index d1e63ed..c4b2614 100644
--- a/src/public/components/layout/layout/index.tsx
+++ b/src/public/components/layout/layout/index.tsx
@@ -38,7 +38,7 @@ export interface LayoutProps {
   history:History
 };
 
-class LayoutComponent extends React.Component<LayoutProps> {
+export class LayoutComponent extends React.Component<LayoutProps> {
   view:HTMLDivElement;
 
   constructor(props:LayoutProps) {
@@ -61,28 +61,31 @@ class LayoutComponent extends React.Component<LayoutProps> {
         <>
           <StarBackground />
           <div className="c-layout">
-            <Header className="c-layout__header" />
 
-            <div className="c-layout__view" ref={e => this.view = e}>
-              <AnimatedSwitch
-                timeout={1000} classNames="c-page__transition"
-                onEntering={() => this.onTransitionStart()}
-                onEntered={() => this.onTransitionEnd()}
-              >
-                <Page exact path="/" name="home" />
-                <Page exact path="/about" name="about" />
-                <Page exact path="/contact" name="contact" />
-                <Page exact path="/projects" name="projects" />
+            {/* Header and Layout Wrapper */}
+            <div className="c-layout__inner">
+              <Header className="c-layout__header" />
 
-                <Page exact path="/legal/privacy" name="privacy" />
+              <div className="c-layout__view" ref={e => this.view = e}>
+                <AnimatedSwitch
+                  timeout={1000} classNames="c-page__transition"
+                  onEntering={() => this.onTransitionStart()}
+                  onEntered={() => this.onTransitionEnd()}
+                >
+                  <Page exact path="/" name="home" />
+                  <Page exact path="/about" name="about" />
+                  <Page exact path="/contact" name="contact" />
+                  <Page exact path="/projects" name="projects" />
 
-                <Page exact path="/blog" name="blog" />
-                <Page exact path="/blog/article/:handle" name="article" />
+                  <Page exact path="/legal/privacy" name="privacy" />
 
-                <Page path="/" name="404" />
-              </AnimatedSwitch>
+                  <Page exact path="/blog" name="blog" />
+                  <Page exact path="/blog/article/:handle" name="article" />
+                </AnimatedSwitch>
+              </div>
             </div>
 
+            {/* Footer */}
             <Footer className="c-layout__footer" />
           </div>
         </>
@@ -90,4 +93,3 @@ class LayoutComponent extends React.Component<LayoutProps> {
     )
   }
 }
-export const Layout = LayoutComponent;
diff --git a/src/public/components/layout/layout/styles.scss b/src/public/components/layout/layout/styles.scss
index 239b601..3706ddc 100644
--- a/src/public/components/layout/layout/styles.scss
+++ b/src/public/components/layout/layout/styles.scss
@@ -16,18 +16,27 @@ $c-layout--menu-width: 275px;
   @include t-media-query($s-xsmall-up) {
     display: flex;
     flex-direction: column;
+    max-height: 100%;
+
+    &__inner {
+      display: flex;
+      width: 100%;
+      flex-grow: 1;
+      overflow-y: auto;
+    }
 
     &__view {
-      position: relative;
-      flex: 1;
-      overflow: hidden;
+      //position: relative;
+      flex-basis: 100%;
+      flex-grow: 1;
+      //overflow: hidden;
     }
 
     &__header {
-      position: absolute;
-      top: 0;
-      left: 0;
+      width: auto;
     }
+
+    &__footer { }
   }
 
 
diff --git a/src/public/components/page/styles.scss b/src/public/components/page/styles.scss
index cc45ab6..7c80622 100644
--- a/src/public/components/page/styles.scss
+++ b/src/public/components/page/styles.scss
@@ -16,7 +16,7 @@
     &-enter,&-exit {
       transition: 1s $s-animation--ease-in-out;
 
-      //&-active .c-page__effect { overflow-y: visible; }
+      &-active .c-page__effect { overflow-y: visible; }
     }
 
     &-enter {
@@ -29,7 +29,7 @@
       }
     }
 
-    &-exit {
+    /*&-exit {
       position: absolute;
       transform: translateY(0%);
       top: 0;
@@ -39,6 +39,6 @@
         transform: translateY(-100vh);
         opacity: 0;
       }
-    }
+    }*/
   }
 }
diff --git a/src/public/pages/home/index.tsx b/src/public/pages/home/index.tsx
index b258217..391a674 100644
--- a/src/public/pages/home/index.tsx
+++ b/src/public/pages/home/index.tsx
@@ -51,16 +51,7 @@ export class HomePage extends React.Component<any> {
 
   render() {
     return <PageWrapper title={null}>
-      <div className="p-home__feature">
-        <HomePageBanner />
-      </div>
-
-      <nav className="p-home__nav">
-        <NavBox to="/about" src={require('./../../assets/navigation/about-me.svg')} alt="About Me" />
-        <NavBox to="/blog" src={require('./../../assets/navigation/blog.svg')} alt="Blog" />
-        {/*<NavBox to="/projects" src={require('./../../assets/navigation/about.jpg')} alt="Projects" />*/}
-        <NavBox to="/contact" src={require('./../../assets/navigation/contact.svg')} alt="Contact Me" />
-      </nav>
+      <HomePageBanner />
     </PageWrapper>;
   }
 };
diff --git a/src/public/styles/settings/z.scss b/src/public/styles/settings/z.scss
index 0aaba2c..0f0bf2f 100644
--- a/src/public/styles/settings/z.scss
+++ b/src/public/styles/settings/z.scss
@@ -2,3 +2,4 @@ $s-z--background: 0;
 $s-z--layout: 1;
 $s-z--header: 10;
 $s-z--page-transition-blocking: 100;
+$s-z--menu: 20;
diff --git a/yarn.lock b/yarn.lock
index 86b3edb..dbcb022 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -658,7 +658,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.3":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.3":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
   integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
@@ -926,9 +926,9 @@
     "@types/range-parser" "*"
 
 "@types/express@^4.16.0":
-  version "4.16.1"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.16.1.tgz#d756bd1a85c34d87eaf44c888bad27ba8a4b7cf0"
-  integrity sha512-V0clmJow23WeyblmACoxbHBu2JKlE5TiIme6Lem14FnPW9gsttyHtk6wq7njcdIWH1njAaFgR8gW09lgY98gQg==
+  version "4.17.0"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.0.tgz#49eaedb209582a86f12ed9b725160f12d04ef287"
+  integrity sha512-CjaMu57cjgjuZbh9DpkloeGxV45CnMGlVd+XpG7Gm9QgVrd7KFq+X4HY0vM+2v0bczS48Wg7bvnMY5TN+Xmcfw==
   dependencies:
     "@types/body-parser" "*"
     "@types/express-serve-static-core" "*"
@@ -1014,9 +1014,9 @@
     "@types/node" "*"
 
 "@types/node@*", "@types/node@^12.0.4":
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.4.tgz#46832183115c904410c275e34cf9403992999c32"
-  integrity sha512-j8YL2C0fXq7IONwl/Ud5Kt0PeXw22zGERt+HSSnwbKOJVsAGkEz3sFCYwaF9IOuoG1HOtE0vKCj6sXF7Q0+Vaw==
+  version "12.0.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.5.tgz#ac14404c33d1a789973c45379a67f7f7e58a01b9"
+  integrity sha512-CFLSALoE+93+Hcb5pFjp0J1uMrrbLRe+L1+gFwerJ776R3TACSF0kTVRQ7AvRa7aFx70nqYHAc7wQPlt9kY2Mg==
 
 "@types/nodemailer@^6.2.0":
   version "6.2.0"
@@ -1381,9 +1381,9 @@
     webpack-hot-middleware "^2.25.0"
 
 "@yourwishes/app-server@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@yourwishes/app-server/-/app-server-2.1.0.tgz#078a5b70e7920a9bda5d954a7629ef917ae42f57"
-  integrity sha512-6eMquPaF/XbTyt5MqV4XamwlOX1+DF0Q3so+0QqIEYIbXX/JlKiDUvbTIKnPDn3nkXSLbJv9d5bwtkJuR/bK8g==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@yourwishes/app-server/-/app-server-2.1.1.tgz#fe6946dec4c6c291558c6de3ff90232ee86a59e7"
+  integrity sha512-jeuFaT4hVav89ALoAc2FM5Fy5Ilmhfs3GEypmsqGy7GeyStOEpKxSk0KMuUlOmY/I3P5wBku1J5tXMrQ5dkjig==
   dependencies:
     "@types/body-parser" "^1.17.0"
     "@types/express" "^4.16.0"
@@ -2111,9 +2111,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000971:
-  version "1.0.30000971"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000971.tgz#d1000e4546486a6977756547352bc96a4cfd2b13"
-  integrity sha512-TQFYFhRS0O5rdsmSbF1Wn+16latXYsQJat66f7S7lizXW1PVpWJeZw9wqqVLIjuxDRz7s7xRUj13QCfd8hKn6g==
+  version "1.0.30000974"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000974.tgz#b7afe14ee004e97ce6dc73e3f878290a12928ad8"
+  integrity sha512-xc3rkNS/Zc3CmpMKuczWEdY2sZgx09BkAxfvkxlAEBTqcMHeL8QnPqhKse+5sRTi3nrw2pJwToD2WvKn1Uhvww==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -2294,9 +2294,9 @@ color-string@^1.5.2:
     simple-swizzle "^0.2.2"
 
 color@^3.0.0, color@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.1.1.tgz#7abf5c0d38e89378284e873c207ae2172dcc8a61"
-  integrity sha512-PvUltIXRjehRKPSy89VnDWFKY58xyhTLyxIg21vwQBI6qLwZNPmC8k3C1uytIgFKEpOIzN4y32iPm8231zFHIg==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
+  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
   dependencies:
     color-convert "^1.9.1"
     color-string "^1.5.2"
@@ -3006,9 +3006,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.137:
-  version "1.3.143"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.143.tgz#8b2a631ab75157aa53d0c2933275643b99ef580b"
-  integrity sha512-J9jOpxIljQZlV6GIP2fwAWq0T69syawU0sH3EW3O2Bgxquiy+veeIT5mBDRz+i3oHUSL1tvVgRKH3/4QiQh9Pg==
+  version "1.3.148"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.148.tgz#5796c0d9eb0358d397163413b90bf376c5d8bf08"
+  integrity sha512-nuCOlXNlGMQmdzihIPGm2K3Yf3H1hke/1rK381i02pH8wNliJU9hVNnOi/xjmxt+mjABd/BzufP5nPHWKshLWA==
 
 elliptic@^6.0.0:
   version "6.4.1"
@@ -5246,6 +5246,15 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
+mini-create-react-context@^0.3.0:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
+  integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
+  dependencies:
+    "@babel/runtime" "^7.4.0"
+    gud "^1.0.0"
+    tiny-warning "^1.0.2"
+
 mini-css-extract-plugin@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.7.0.tgz#5ba8290fbb4179a43dd27cca444ba150bee743a0"
@@ -5545,9 +5554,9 @@ node-pre-gyp@^0.12.0:
     tar "^4"
 
 node-releases@^1.1.21:
-  version "1.1.22"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.22.tgz#d90cd5adc59ab9b0f377d4f532b09656399c88bf"
-  integrity sha512-O6XpteBuntW1j86mw6LlovBIwTe+sO2+7vi9avQffNeIW4upgnaCVm6xrBWH+KATz7mNNRNNeEpuWB7dT6Cr3w==
+  version "1.1.23"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.23.tgz#de7409f72de044a2fa59c097f436ba89c39997f0"
+  integrity sha512-uq1iL79YjfYC0WXoHbC/z28q/9pOl8kSHaXdWmAAc8No+bDwqkZbzIJz55g/MUsPgSGm9LZ7QSUbzTcH5tz47w==
   dependencies:
     semver "^5.3.0"
 
@@ -6389,9 +6398,9 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
 postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.16"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.16.tgz#48f64f1b4b558cb8b52c88987724359acb010da2"
-  integrity sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA==
+  version "7.0.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
+  integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -6707,7 +6716,7 @@ react-router-dom@5.0.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router@5.0.0, react-router@^5.0.0:
+react-router@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.0.tgz#349863f769ffc2fa10ee7331a4296e86bc12879d"
   integrity sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==
@@ -6723,6 +6732,22 @@ react-router@5.0.0, react-router@^5.0.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-router@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f"
+  integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.3.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-side-effect@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
@@ -7052,9 +7077,9 @@ resolve@1.1.7:
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
 resolve@^1.10.0, resolve@^1.3.2:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.0.tgz#4014870ba296176b86343d50b60f3b50609ce232"
-  integrity sha512-WL2pBDjqT6pGUNSUzMw00o4T7If+z4H2x3Gz893WoUQ5KW8Vr9txp00ykiP16VBaZF5+j/OcXJHZ9+PCvdiDKw==
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e"
+  integrity sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==
   dependencies:
     path-parse "^1.0.6"
 
@@ -7799,9 +7824,9 @@ tar@^2.0.0:
     inherits "2"
 
 tar@^4, tar@^4.4.8:
-  version "4.4.9"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.9.tgz#058fbb152f6fc45733e84585a40c39e59302e1b3"
-  integrity sha512-xisFa7Q2i3HOgfn+nmnWLGHD6Tm23hxjkx6wwGmgxkJFr6wxwXnJOdJYcZjL453PSdF0+bemO03+flAzkIdLBQ==
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.10.tgz#946b2810b9a5e0b26140cf78bea6b0b0d689eba1"
+  integrity sha512-g2SVs5QIxvo6OLp0GudTqEf05maawKUxXru104iaayWA09551tFCTI8f1Asb4lPfkBr91k07iL4c11XO3/b0tA==
   dependencies:
     chownr "^1.1.1"
     fs-minipass "^1.2.5"
@@ -7884,7 +7909,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.4.tgz#346b5415fd93cb696b0c4e8a96697ff590f92463"
   integrity sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g==
 
-tiny-warning@^1.0.0:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"
   integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==
@@ -8354,9 +8379,9 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0:
     source-map "~0.6.1"
 
 webpack@^4.32.2:
-  version "4.32.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.32.2.tgz#3639375364a617e84b914ddb2c770aed511e5bc8"
-  integrity sha512-F+H2Aa1TprTQrpodRAWUMJn7A8MgDx82yQiNvYMaj3d1nv3HetKU0oqEulL9huj8enirKi8KvEXQ3QtuHF89Zg==
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.33.0.tgz#c30fc4307db432e5c5e3333aaa7c16a15a3b277e"
+  integrity sha512-ggWMb0B2QUuYso6FPZKUohOgfm+Z0sVFs8WwWuSH1IAvkWs428VDNmOlAxvHGTB9Dm/qOB/qtE5cRx5y01clxw==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-module-context" "1.8.5"