Mobile menu (#68)

vinaypuppal · Zubair Ahmed · commit 62746df01fdb · 2017-11-04T08:57:02.000+05:30
* implement mobile menu, fix few padding issue and change some colors

* fix mobile hover color issue

* some more color changes

* move menu icon more to left

* added production cdn links to serving md files

* menu highlight color slighlt changed from yellow
diff --git a/components/common-banner.js b/components/common-banner.js
@@ -9,7 +9,7 @@ export default props => (
     <style jsx>{`
       .root {
         background-color: #f4f7fb;
-        min-height: 200px;
+        min-height: 150px;
         text-align: center;
       }
       .headline {
@@ -18,6 +18,20 @@ export default props => (
         color: #df1cb5;
         font-weight: 900;
       }
+      h2 {
+        max-width: 1024px;
+        margin-left: auto;
+        margin-right: auto;
+        letter-spacing: 2px;
+        line-height: 2;
+        margin-bottom: 30px;
+      }
+      @media (max-width: 720px) {
+        h2 {
+          font-size: 14px;
+          padding: 0 10px;
+        }
+      }
     `}</style>
   </div>
 );
diff --git a/components/footer.js b/components/footer.js
@@ -39,7 +39,7 @@ export default () => (
     <style jsx>{`
       footer {
         padding: 50px 0;
-        background: #314159;
+        background: #c454df linear-gradient(to bottom, #ec53ab, #d354cf);
         color: #fff;
       }
       .footer__container {
diff --git a/components/global-styles.js b/components/global-styles.js
@@ -27,7 +27,7 @@ export default () => (
         pointer-events: none;
       }
       #nprogress .bar {
-        background: #d812c8;
+        background: #f9d1ed;
         position: fixed;
         z-index: 1031;
         top: 0;
@@ -42,7 +42,7 @@ export default () => (
         right: 0px;
         width: 100px;
         height: 100%;
-        box-shadow: 0 0 10px #d812c8, 0 0 5px #d812c8;
+        box-shadow: 0 0 10px #f9d1ed, 0 0 5px #f9d1ed;
         opacity: 1;
         transform: rotate(3deg) translate(0px, -4px);
       }
diff --git a/components/header.js b/components/header.js
@@ -3,6 +3,11 @@ import Headroom from 'react-headroom';
 import NProgress from 'nprogress';
 import Router from 'next/router';
 import Link from 'next/link';
+import GoHome from 'react-icons/lib/go/home';
+import GoBook from 'react-icons/lib/md/school';
+import GoStar from 'react-icons/lib/md/library-books';
+import GoCalender from 'react-icons/lib/go/calendar';
+import GoOrg from 'react-icons/lib/go/organization';
 
 import GlobalStyles from './global-styles';
 import Head from './head';
@@ -29,26 +34,31 @@ export default props => {
       title: 'Home',
       path: '/',
       external: false,
+      icon: GoHome,
     },
     {
       title: 'Learn',
       path: '/learn',
       external: false,
+      icon: GoBook,
     },
     {
       title: 'Space',
       path: '/space',
       external: false,
+      icon: GoOrg,
     },
     {
       title: 'Events',
       path: '/events',
       external: false,
+      icon: GoCalender,
     },
     {
       title: 'Blog',
       path: 'https://coderplex.org/blog',
       external: true,
+      icon: GoStar,
     },
   ];
   return (
@@ -61,6 +71,10 @@ export default props => {
             <div className="nav__logo">
               <img src="/static/favicons/android-chrome-192x192.png" alt="" />
             </div>
+            <input id="menu" type="checkbox" />
+            <label htmlFor="menu" className="mobile__menu">
+              <span>Menu</span>
+            </label>
             <ul className="nav__links">
               {navItems.map(item => {
                 return (
@@ -72,7 +86,8 @@ export default props => {
                           ? 'nav__link--active'
                           : ''}`}
                       >
-                        {item.title}
+                        {React.createElement(item.icon)}
+                        <span>{item.title}</span>
                       </a>
                     ) : (
                       <Link href={item.path}>
@@ -82,7 +97,8 @@ export default props => {
                             ? 'nav__link--active'
                             : ''}`}
                         >
-                          {item.title}
+                          {React.createElement(item.icon)}
+                          <span>{item.title}</span>
                         </a>
                       </Link>
                     )}
@@ -95,9 +111,9 @@ export default props => {
       </header>
       <style jsx>{`
         header {
-          padding: 5px 20px;
+          padding: 5px 10px;
           width: 100%;
-          background: #fff;
+          background: #c454df linear-gradient(to top, #ec53ab, #d354cf);
           z-index: 1000;
         }
         .header__container {
@@ -106,8 +122,9 @@ export default props => {
         }
         nav {
           display: flex;
-          height: 70px;
+          height: 56px;
           align-items: center;
+          position: relative;
         }
         .nav__logo {
           flex: 1;
@@ -146,27 +163,125 @@ export default props => {
         }
         .nav__link {
           text-decoration: none;
-          color: #666;
-          font-size: 14px;
+          color: #fff;
+          font-size: 16px;
+          font-weight: bold;
           padding-bottom: 4px;
+          display: flex;
+          align-items: center;
+        }
+        .nav__link span {
+          margin-left: 5px;
         }
         .nav__link:hover {
-          color: #444;
+          color: #e1e1e1;
         }
         .nav__link--active {
-          color: #444;
-          border-bottom: 2px solid #d900e4;
+          border-bottom: 2px solid #fff;
           pointer-events: none;
         }
+        input[type='checkbox'] {
+          position: absolute;
+          opacity: 0;
+          top: 25px;
+          left: 25px;
+        }
+        .mobile__menu {
+          width: 30px;
+          height: 24px;
+          display: none;
+          cursor: pointer;
+          top: 15px;
+          left: 5px;
+          position: absolute;
+          z-index: 1;
+        }
+        .mobile__menu:after,
+        .mobile__menu:before {
+          content: '';
+          width: 100%;
+          height: 2px;
+          border-radius: 4px;
+          position: absolute;
+          background: #fff;
+          top: 50%;
+          -webkit-transition: -webkit-transform 0.5s;
+          transition: -webkit-transform 0.5s;
+          transition: transform 0.5s;
+          transition: transform 0.5s, -webkit-transform 0.5s;
+          -webkit-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+        }
+        .mobile__menu:after {
+          -webkit-transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
+          transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
+        }
+        .mobile__menu:before {
+          -webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
+          transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
+        }
+        .mobile__menu span {
+          position: absolute;
+          width: 100%;
+          overflow: hidden;
+          height: 2px;
+          border-radius: 4px;
+          background: #fff;
+          top: 50%;
+          -webkit-transition: all 0.5s;
+          transition: all 0.5s;
+        }
+        input[type='checkbox']:checked ~ .mobile__menu span {
+          -webkit-transform: scale3d(0, 1, 1);
+          transform: scale3d(0, 1, 1);
+        }
+        input[type='checkbox']:checked ~ .mobile__menu:after {
+          -webkit-transform: rotate3d(0, 0, 1, 45deg);
+          transform: rotate3d(0, 0, 1, 45deg);
+        }
+        input[type='checkbox']:checked ~ .mobile__menu:before {
+          -webkit-transform: rotate3d(0, 0, 1, -45deg);
+          transform: rotate3d(0, 0, 1, -45deg);
+        }
+        input[type='checkbox']:checked ~ .nav__links {
+          display: flex;
+        }
         @media (max-width: 700px) {
           nav {
             justify-content: center;
           }
           .nav__logo {
             flex: initial;
           }
+          .mobile__menu {
+            display: block;
+          }
           .nav__links {
+            flex-direction: column;
+            width: 100%;
+            position: fixed;
+            top: 66px;
+            background: #fafafa;
             display: none;
+            border-bottom: 1px solid #eee;
+            font-size: 10px;
+          }
+          .nav__linkItem {
+            width: 100%;
+            border-top: 1px solid #eee;
+          }
+          .nav__link {
+            width: 100%;
+            font-size: 14px;
+            font-weight: bold;
+            padding: 12px 15px;
+            color: #888;
+          }
+          .nav__link:hover {
+            color: #222;
+          }
+          .nav__link--active {
+            border: none;
           }
         }
       `}</style>
diff --git a/pages/index.js b/pages/index.js
@@ -209,7 +209,7 @@ class Home extends React.Component {
           }
           .about__container {
             padding-bottom: 30px;
-            min-height: calc(100vh - 260px);
+            min-height: 200px;
             margin: 0 auto;
             display: flex;
             justify-content: center;
@@ -220,12 +220,12 @@ class Home extends React.Component {
             width: 100%;
           }
           .about__tag {
-            font-size: 2.5em;
+            font-size: 2.5rem;
           }
           .container {
             background-color: #ffffff;
             text-align: center;
-            padding: 60px;
+            padding: 20px;
           }
           .taglines {
             padding-bottom: 20px;
@@ -252,7 +252,11 @@ class Home extends React.Component {
           .discord-subscribe .container {
             background: #FAFAFA;
           }
-
+          @media (max-width: 720px) {
+            .about__tag {
+              font-size: 1.5rem;
+            }
+          }
         `}</style>
       </div>
     );
diff --git a/pages/learn/index.js b/pages/learn/index.js
@@ -40,7 +40,7 @@ class Learn extends React.Component {
 
   render() {
     return (
-      <div className="root">
+      <div>
         <CommonBanner
           pageTitle="Learn"
           pageSubTitle="Open Source Learning Guides to master your favorite technology"
@@ -135,7 +135,7 @@ class Learn extends React.Component {
             align-content: flex-start;
             align-items: flex-start;
             background-color: #ffffff;
-            padding: 30px;
+            padding: 20px;
             min-height: calc(100vh - 70px);
             margin: 0 auto;
           }
diff --git a/pages/space.js b/pages/space.js
@@ -8,21 +8,11 @@ export default publicPage(() => (
   <div>
     <CommonBanner
       pageTitle="Space"
-      pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning"
+      pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning. These are dynamic learning environments, where everyone learns at their own pace and
+            compliments each other. You can also participate in weekly group activities like Open
+            source evenings and other casual competitions"
     />
     <main>
-      <section>
-        <div>
-          <Card centered fluid>
-            <Card.Content>
-              These are dynamic learning environments, where everyone learns at
-              their own pace and compliments each other. You can also
-              participate in weekly group activities like Open source evenings
-              and other casual competitions
-            </Card.Content>
-          </Card>
-        </div>
-      </section>
       <section>
         <h2>Who is this for?</h2>
         <div>
diff --git a/utils/mock-data.js b/utils/mock-data.js

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export default () => (`
`39`	`39`	<style jsx>{`
`40`	`40`	`footer {`
`41`	`41`	`padding: 50px 0;`
`42`		`- background: #314159;`
	`42`	`+ background: #c454df linear-gradient(to bottom, #ec53ab, #d354cf);`
`43`	`43`	`color: #fff;`
`44`	`44`	`}`
`45`	`45`	`.footer__container {`