Add Mobile Menu, slideout, styling and component restructure

2018-07-05 16:49:34 +02:00
parent 3051a7d188
commit d6df2f0270
8 changed files with 187 additions and 40 deletions
--- 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"
--- 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>
--- 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%;
-}
+}
+
+/* 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;
+}
--- 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
--- a/src/components/SideMenu.js
+++ 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
--- 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>
 )

--- 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"
      />
--- 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"