Rebuilt navigation system.

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} />
     );
   }
 }

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>

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>

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>

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; }
+  }
 }

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>
+    );
+  }
+};

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; }
+  }
+}

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>
     );
   }
-};
+}

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>
+};

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;
+  }
+}

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; }
-      }
-    }
   }
 }

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;

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 { }
   }
 
 

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;
       }
-    }
+    }*/
   }
 }

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>;
   }
 };

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;