Add mobile header menu

src/components/Header.css

@@ -0,0 +1,44 @@
+.menu_icon [class*='menu_bar-'] {
+  background: #000;
+  display: block;
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: 0.2s ease all;
+  transition: 0.2s ease all;
+  height: 2px;
+  margin-bottom: 0.3rem;
+}
+
+.menu_bar-top {
+  width: 25px;
+}
+
+.menu_bar-mid {
+  width: 15px;
+}
+
+.menu_bar-bot {
+  width: 20px;
+}
+
+.menu-opened .menu_bar-bot {
+  width: 25px;
+}
+
+.menu-opened .menu_bar-top {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  -webkit-transform-origin: 15% 15%;
+  transform-origin: 15% 15%;
+}
+
+.menu-opened .menu_bar-mid {
+  opacity: 0;
+}
+
+.menu-opened .menu_bar-bot {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(-45deg);
+  -webkit-transform-origin: 15% 95%;
+  transform-origin: 15% 95%;
+}

src/components/Header.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import Link from 'gatsby-link'
+import SaburlyLogo from "../images/Saburly-Logo.svg"
+
+const Header = () => (
+  <header>
+    <nav className="flex items-center justify-between flex-wrap lg:p-6">
+      <div class="flex items-center flex-no-shrink text-white mr-6">
+        <Link to="/">
+          <img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
+        </Link>
+      </div>
+
+      <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+        <ul className="flex text-sm justify-center lg:flex-grow">
+          <Link to="/services">
+            <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">What We Do
+        </li>
+          </Link>
+          <Link to="/about">
+            <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">TEAM
+        </li>
+          </Link>
+          <Link to="/blog">
+            <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">BLOG
+        </li>
+          </Link>
+        </ul>
+
+        <Link to="/contact" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-darkest border-teal-darkest hover:border-teal hover:text-white hover:bg-teal mt-4 lg:mt-0 uppercase mr-3 rounded-full">Contact</Link>
+
+        <Link to="/proposal" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest border-grey-darkest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal rounded-full ">Get a free proposal</Link>
+      </div>
+    </nav>
+  </header>
+)
+
+export default Header

src/components/MainIntro.js

@@ -4,14 +4,14 @@ import Link from 'gatsby-link'
 import ImgBuildSite from '../images/programming-company.svg'
 
 const MainIntro = () => (
-  <section className="lg:flex items-center">
+  <section className="lg:flex items-center p-3">
-    <div className="max-w-sm">
+    <div className="max-w-xs">
       <h3>Welcome To Saburly</h3>
       <h1>We build the right software for your needs</h1>
       <p>We are a team of creative, open minded, skilled and passionate engineers that ship success every day.</p>
       <Link to="/proposal" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest border-grey-darkest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal rounded-full ">Let's Get In Touch</Link>
     </div>
-    <img src={ImgBuildSite} className="p-3 overflow-hidden" />
+    <img src={ImgBuildSite} className="overflow-hidden" />
   </section>
 )