Add Mobile Menu, slideout, styling and component restructure

src/components/Footer.js

@@ -71,7 +71,7 @@ const Footer = () => (
         </div>
       </div>
 
-      <div className="lg:w-3/4 ml-10">
+      <div className="lg:w-3/4">
         <div className="p-4 text-center lg:text-left sm:flex justify-between">
           <nav>
             <p className="font-thin text-white opacity-50">Sitemap</p>

src/components/Header.css

@@ -41,4 +41,92 @@
   transform: rotate(-45deg);
   -webkit-transform-origin: 15% 95%;
   transform-origin: 15% 95%;
-}
+}
+
+/* Side Menu */
+.slideout-menu {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 256px;
+  min-height: 100vh;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  z-index: 0;
+  display: none;
+  background-color: #1a0828;
+}
+
+.slideout-menu-left {
+  left: 0;
+}
+
+.slideout-menu-right {
+  right: 0;
+}
+
+.slideout-panel {
+  position: relative;
+  z-index: 1;
+  will-change: transform;
+  background-color: #fff;
+  /* A background-color is required */
+  min-height: 100vh;
+}
+
+.slideout-open,
+.slideout-open body,
+.slideout-open .slideout-panel {
+  overflow: hidden;
+}
+
+.slideout-open .slideout-menu {
+  display: block;
+}
+
+.panel:before {
+  content: '';
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.5s ease-in-out;
+}
+
+.panel-open:before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
+
+.mainmenu {
+  margin-top: 4rem;
+}
+
+.side--close:hover,
+.mainmenu li:hover {
+  background-color: #cfba89;
+}
+
+.side--close {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.mainmenu li a {
+  color: #fff;
+  font-size: 1.2rem;
+  height: 100%;
+  display: block;
+  padding: 0.5rem 0rem;
+  font-weight: 600;
+  font-family: 'Montserrat', sans-serif;
+}
+
+.mainmenu li a:hover,
+.side--close:hover,
+a:hover {
+  text-decoration: none !important;
+}

src/components/Header.js

@@ -2,47 +2,75 @@ import React from 'react'
 import Link from 'gatsby-link'
 import LogoSaburly from '../images/logo-saburly-white.svg'
 import Button from './Button'
+import Slideout from 'slideout'
 
 import './Header.css'
 
 let menuClasses =
-  'no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
+  'no-underline mt-4 lg:inline-block opacity-80 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
 
-const Header = () => (
-  <header className="bg-saburly-indigo">
-    <nav className="container mx-auto flex justify-between lg:p-6 p-4">
-      <Link to="/">
-        <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
-      </Link>
+class Header extends React.Component {
+  componentDidMount() {
+    var Slideout = require('slideout')
 
-      <button className="menu_icon lg:invisible">
-        <span className="menu_bar-top" />
-        <span className="menu_bar-mid" />
-        <span className="menu_bar-bot" />
-      </button>
+    const slideout = new Slideout({
+      panel: document.querySelector('.side-panel'),
+      menu: document.querySelector('.side-menu'),
+      toggle: document.querySelector('.side-toggle'),
+      padding: 0,
+      tolerance: 70,
+      side: 'right',
+    })
 
-      <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
-        <ul className="list-reset text-sm">
-          <Link to="/services">
-            <li className={menuClasses}>What We Do</li>
-          </Link>
-          <Link to="/about">
-            <li className={menuClasses}>Team</li>
-          </Link>
-          <Link to="/blog">
-            <li className={menuClasses}>Blog</li>
-          </Link>
+    document
+      .querySelector('.side-toggle')
+      .addEventListener('click', function() {
+        slideout.toggle()
+      })
+  }
 
-          <Button
-            text="Contact"
-            standard
-            classes="rounded-full text-white hover:shadow"
-            url="/contact"
-          />
-        </ul>
+  render() {
+    return (
+      <div>
+        <header className="bg-saburly-indigo">
+          <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
+            <Link to="/">
+              <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
+            </Link>
+
+            <div className="side-toggle">
+              <button className="menu_icon visible lg:invisible">
+                <span className="menu_bar-top" />
+                <span className="menu_bar-mid" />
+                <span className="menu_bar-bot" />
+              </button>
+            </div>
+
+            <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
+              <ul className="list-reset text-sm">
+                <Link to="/services">
+                  <li className={menuClasses}>What We Do</li>
+                </Link>
+                <Link to="/about">
+                  <li className={menuClasses}>Team</li>
+                </Link>
+                <Link to="/blog">
+                  <li className={menuClasses}>Blog</li>
+                </Link>
+
+                <Button
+                  text="Contact"
+                  standard
+                  classes="rounded-full text-white hover:shadow"
+                  url="/contact"
+                />
+              </ul>
+            </div>
+          </nav>
+        </header>
       </div>
-    </nav>
-  </header>
-)
+    )
+  }
+}
 
 export default Header

src/components/SideMenu.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+class SideMenu extends Component {
+  render() {
+    return (
+      <div className="side-menu">
+        <h1>Hello World</h1>
+      </div>
+    )
+  }
+}
+
+export default SideMenu