From d6df2f02707900a17f964dbce41fcf385bcdc96b Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Thu, 5 Jul 2018 16:49:34 +0200
Subject: [PATCH] Add Mobile Menu, slideout, styling and component restructure

---
 package.json               |  3 +-
 src/components/Footer.js   |  2 +-
 src/components/Header.css  | 90 +++++++++++++++++++++++++++++++++++-
 src/components/Header.js   | 94 +++++++++++++++++++++++++-------------
 src/components/SideMenu.js | 13 ++++++
 src/layouts/index.js       |  8 ++--
 src/pages/index.js         |  2 +-
 yarn.lock                  | 15 ++++++
 8 files changed, 187 insertions(+), 40 deletions(-)
 create mode 100644 src/components/SideMenu.js

diff --git a/package.json b/package.json
index d216170..dc6eb39 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "gatsby-plugin-netlify": "^1.0.21",
     "gatsby-plugin-react-helmet": "^2.0.10",
     "gatsby-source-wordpress": "^2.0.93",
-    "react-helmet": "^5.2.0"
+    "react-helmet": "^5.2.0",
+    "slideout": "^1.0.1"
   },
   "keywords": [
     "gatsby"
diff --git a/src/components/Footer.js b/src/components/Footer.js
index fcb6f1a..0992abc 100644
--- a/src/components/Footer.js
+++ b/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>
diff --git a/src/components/Header.css b/src/components/Header.css
index 75fd82a..8f14b20 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -41,4 +41,92 @@
   transform: rotate(-45deg);
   -webkit-transform-origin: 15% 95%;
   transform-origin: 15% 95%;
-}
\ No newline at end of file
+}
+
+/* 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;
+}
diff --git a/src/components/Header.js b/src/components/Header.js
index e6f8deb..5dc6b72 100644
--- a/src/components/Header.js
+++ b/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
diff --git a/src/components/SideMenu.js b/src/components/SideMenu.js
new file mode 100644
index 0000000..2ed22b1
--- /dev/null
+++ b/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
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 4ebf28e..bbfdbbc 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -19,9 +19,11 @@ const Layout = ({ children, data }) => (
         },
       ]}
     />
-    <Header />
-    {children()}
-    <Footer />
+    <div className="side-panel">
+      <Header />
+      {children()}
+      <Footer />
+    </div>
   </div>
 )
 
diff --git a/src/pages/index.js b/src/pages/index.js
index ac4f43f..fb8b6b3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -136,7 +136,7 @@ const IndexPage = () => (
 
       <Button
         filled
-        text="Let's Build Together"
+        text="Get a free proposal"
         url="/proposal"
         classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20"
       />
diff --git a/yarn.lock b/yarn.lock
index 1712b2c..393af54 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2328,6 +2328,10 @@ decompress-response@^3.2.0:
   dependencies:
     mimic-response "^1.0.0"
 
+decouple@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/decouple/-/decouple-0.0.2.tgz#cb373640c37f987a5f6866724ccd424a80f9d9a2"
+
 deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2592,6 +2596,10 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+"emitter@git+https://github.com/Mango/emitter.git#0.0.7":
+  version "0.0.7"
+  resolved "git+https://github.com/Mango/emitter.git#41ab8a3956269c7ed468bde50203e15b3274152f"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -7416,6 +7424,13 @@ slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
 
+slideout@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/slideout/-/slideout-1.0.1.tgz#49f2fbd7e4155fe0dbe6d95938f012243565f625"
+  dependencies:
+    decouple "0.0.2"
+    emitter "git+https://github.com/Mango/emitter.git#0.0.7"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"