Social but I did it at 10PM

src/public/components/layout/header/hamburger/MenuLink.tsx

@@ -0,0 +1,39 @@
+// 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, LinkProps } from '@yourwishes/app-simple-react/dist/public';
+
+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>
+  );
+};

src/public/components/layout/header/hamburger/MenuSocial.tsx

@@ -0,0 +1,42 @@
+// 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, Image, ImageSource } from '@yourwishes/app-simple-react/dist/public';
+
+export interface MenuSocialProps {
+  to:string,
+  title?:string,
+  src:ImageSource
+};
+
+export const MenuSocial = (props:MenuSocialProps) => {
+  let { to, title, src } = props;
+
+  return (
+    <Link to={to} title={title} className={`c-hamburger__social-link is-${title.toLowerCase()}`}>
+      <Image src={src} className="c-hamburger__social-link-image" />
+    </Link>
+  );
+};

src/public/components/layout/header/hamburger/index.tsx

@@ -22,27 +22,13 @@
 // 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 { Image } from '@yourwishes/app-simple-react/dist/public/';
+import { MenuLink, MenuLinkProps } from './MenuLink';
+import { MenuSocial, MenuSocialProps } from './MenuSocial';
 
 import './styles.scss';
 
-
+export interface HamburgerMenuProps { className?:string, links:MenuLinkProps[], social:MenuSocialProps[] }
-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> {
@@ -75,12 +61,11 @@ export class HamburgerMenu extends React.Component<HamburgerMenuProps, Hamburger
   }
 
   onItemClick(e:React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
-    console.log('oof');
     this.setState({ open: false });
   }
 
   render () {
-    let { className, links } = this.props;
+    let { className, links, social } = this.props;
     let { open } = this.state;
 
     return (
@@ -101,9 +86,11 @@ export class HamburgerMenu extends React.Component<HamburgerMenuProps, Hamburger
 
         <div className="c-hamburger__menu" ref={e => this.menu = e }>
           <div className="c-hamburger__menu-body">
-            { links.map((link,i) =>
+            { links.map((link,i) => <MenuLink {...link} key={i} onClick={e => this.onItemClick(e)} /> )}
-              <MenuLink {...link} key={i} onClick={e => this.onItemClick(e)} />
+
-            )}
+            <div className="c-hamburger__social">
+              { social.map((sc,i) => <MenuSocial {...sc} key={i} />) }
+            </div>
           </div>
         </div>
       </nav>

src/public/components/layout/header/hamburger/styles.scss

@@ -68,4 +68,24 @@
 
     &.is-active { border-color: $s-color--primary; }
   }
+
+  &__social {
+    width: 100%;
+
+    display: flex;
+    flex-wrap: wrap;
+
+    &-link {
+      display: block;
+      width: 20%;
+      width: calc(20% - #{$s-gutter--xsmall / 2});
+      margin-top: $s-gutter--xsmall;
+      padding: $s-gutter--xsmall;
+      border-radius: 100%;
+
+      &.is-github { background: $s-social--github-background; }
+
+      + #{&} { margin-left: calc(#{$s-gutter--xsmall} + 0); }
+    }
+  }
 }

src/public/components/layout/header/index.tsx

@@ -28,6 +28,7 @@ import { HeaderNav } from './nav/';
 
 import './styles.scss';
 
+
 export const Links = [
   { title: 'Home', exact: true, to: '/' },
   { title: 'About', exact: true, to: '/about' },
@@ -36,6 +37,11 @@ export const Links = [
 ];
 
 
+export const Social = [
+  { title: 'GitHub', to: '//github.com/YourWishes', src: require('./../../../assets/icons/icon-github.svg') }
+];
+
+
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> { }
 export interface HeaderState {
   now:Date
@@ -70,9 +76,9 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
 
     return (
       <header {...this.props} className={`c-header ${className||""}`}>
-        <HamburgerMenu className="c-header__hamburger" links={Links}  />
+        <HamburgerMenu className="c-header__hamburger" links={Links} social={Social} />
         <Logo className="c-header__logo" />
-        <HeaderNav className="c-header__nav" links={Links}  />
+        <HeaderNav className="c-header__nav" links={Links} social={Social} />
 
         <span className="c-header__time">
           {pz(now.getHours())}<span className="c-header__time-colon">:</span>{pz(now.getMinutes())}

src/public/components/layout/header/nav/HeaderNavLink.tsx

@@ -0,0 +1,42 @@
+// 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';
+
+export interface HeaderNavLinkProps {
+  to:string,
+  title:string,
+  exact?:boolean
+}
+
+export const HeaderNavLink = (props:HeaderNavLinkProps) => {
+
+  return (
+    <Link className="c-header-nav__link" {...props} activeClassName="is-active">
+      <span className="c-header-nav__link-inner">
+        { props.title }
+      </span>
+    </Link>
+  );
+};

src/public/components/layout/header/nav/HeaderNavSocial.tsx

@@ -0,0 +1,41 @@
+// 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, Image, ImageSource } from '@yourwishes/app-simple-react/dist/public';
+
+export interface HeaderNavSocialProps {
+  to:string,
+  title?:string,
+  src:ImageSource
+}
+
+export const HeaderNavSocial = (props:HeaderNavSocialProps) => {
+  let { to, title, src } = props;
+
+  return (
+    <Link to={to} title={title} className={`c-header-nav__social-link is-${title.toLowerCase()}`}>
+      <Image src={src} className="c-header-nav__social-link-image" />
+    </Link>
+  );
+};

src/public/components/layout/header/nav/index.tsx

@@ -22,40 +22,30 @@
 // 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 { Link, Image } from '@yourwishes/app-simple-react/dist/public';
+import { HeaderNavLink, HeaderNavLinkProps } from './HeaderNavLink';
+import { HeaderNavSocial, HeaderNavSocialProps } from './HeaderNavSocial';
+
 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[]
+  links:HeaderNavLinkProps[],
+  social:HeaderNavSocialProps[]
 };
 
 export const HeaderNav = (props:HeaderNavProps) => {
-  let { className, links } = props;
+  let { className, links, social } = props;
 
   return <nav className={`c-header-nav ${className||""}`}>
     { links.map((link,i) =>
       <HeaderNavLink {...link} key={i} />
     )}
+
+    <div className="c-header-nav__social">
+      { social.map((sc,i) =>
+        <HeaderNavSocial {...sc} key={i} />
+      )}
+    </div>
   </nav>
 };

src/public/components/layout/header/nav/styles.scss

@@ -40,8 +40,30 @@
     }
   }
 
-  &__nav {
+  &__nav {}
 
+  &__social {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+
+    align-content: flex-end;
+    justify-content: space-between;
+
+    padding: $s-gutter--small;
+
+    &-link {
+      width: 50%;
+      width: calc(50% - #{$s-gutter--xsmall / 2});
+      margin-top: $s-gutter--xsmall;
+      padding: $s-gutter--xsmall;
+      border-radius: 100%;
+      transition: all $s-animation--time-fast $s-animation--ease-out;
+
+      &:hover { transform: scale(1.05); }
+      
+      &.is-github { background: $s-social--github-background; }
+    }
   }
 
   @include t-media-query($s-small-up) {