add hamburger menu (AgileVentures#181)

* hamburgerMenu css
* add window-test to package.json

Author: ALau2088

src/components/navbar/Navbar.css

@@ -1,3 +1,40 @@
 .navbar {
   background-color: #34495E !important;
-}
+}
+
+/* Hamburger Menu */
+@media only screen and (max-width: 767px){
+.close{
+  height: 0;
+  -webkit-transition: 0.3s;
+  transition: height 0.3s;
+  overflow-y: hidden;
+}
+
+.open{
+  height: 400px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  overflow-y: visible;
+}
+
+.hamburger {
+  position: absolute;
+  margin: 0px;
+  padding: 3px 12px 0px 12px;
+  right: 35px;
+  top: 13px;
+  box-sizing: border-box;
+  border: 1.25px solid #fff;
+  border-radius: 5px;
+  text-align: center;
+  text-indent: 0;
+}
+}
+
+@media only screen and (min-width: 767px){
+  .hamburger {
+    display: none;
+  }
+}
+/* Hamburger Menu End */

src/components/navbar/Navbar.js

@@ -4,7 +4,9 @@ import { Link } from 'react-router-dom'
 import { withRouter } from 'react-router'
 import logo from '../../images/av-logo.svg'
 import './Navbar.css'
+
 export class Navbar extends Component {
+  state = { showHamburgerMenu: false }
   currentPath () {
     // this.props.location.split("/") returns ["", ""] when on homepage
     // and ["", "users", "123"] when on /users/123
@@ -17,9 +19,16 @@ export class Navbar extends Component {
     this.props.cookies.remove('_WebsiteOne_session')
   }
 
+  toggleHamburgerMenu = () => {
+    this.setState({
+      showHamburgerMenu: !this.state.showHamburgerMenu
+    })
+  }
+
   render () {
     const { cookies } = this.props
     const activeItem = this.currentPath()
+    const menuView = this.state.showHamburgerMenu ? 'open' : 'close'
     return (
       <Menu stackable borderless inverted as='div' className='navbar'>
         <Container>
@@ -30,73 +39,65 @@ export class Navbar extends Component {
             </Link>
           </Menu.Item>
 
-          <Menu.Menu position='right'>
-            <Menu.Item
-              name='about'
-              active={activeItem === 'about'}
-            >
+          <Menu.Menu position='right' className={`${menuView}`}>
+            <Menu.Item name='about' active={activeItem === 'about'}>
               <Link to='/about'>About</Link>
             </Menu.Item>
 
-            <Menu.Item
-              name='users'
-              active={activeItem === 'users'}
-            >
+            <Menu.Item name='users' active={activeItem === 'users'}>
               <Link to='/users'>Users</Link>
             </Menu.Item>
 
-            <Menu.Item
-              name='projects'
-              active={activeItem === 'projects'}
-            >
+            <Menu.Item name='projects' active={activeItem === 'projects'}>
               <Link to='/projects'>Projects</Link>
             </Menu.Item>
 
             <Menu.Item name='premium' active={activeItem === 'premium'}>
               <Link to='/membership-plans'>Premium</Link>
             </Menu.Item>
 
-            <Menu.Item
-              name='events'
-              active={activeItem === 'events'}
-            >
+            <Menu.Item name='events' active={activeItem === 'events'}>
               <Link to='/events'>Events</Link>
             </Menu.Item>
 
-            <Menu.Item name='getting-started' active={activeItem === 'getting-started'}>
-              <Link to='/getting-started'>
-                Getting Started
-              </Link>
+            <Menu.Item
+              name='getting-started'
+              active={activeItem === 'getting-started'}
+            >
+              <Link to='/getting-started'>Getting Started</Link>
             </Menu.Item>
-            {!cookies.get('_WebsiteOne_session')
-              ? <Fragment>
-                <Menu.Item
-                  name='login'
-                  active={activeItem === 'login'}
-                >
+            {!cookies.get('_WebsiteOne_session') ? (
+              <Fragment>
+                <Menu.Item name='login' active={activeItem === 'login'}>
                   <Link to='/login'>Login</Link>
                 </Menu.Item>
 
-                <Menu.Item
-                  name='signup'
-                  active={activeItem === 'signup'}
-                >
+                <Menu.Item name='signup' active={activeItem === 'signup'}>
                   <Link to='/signup'>Sign up</Link>
                 </Menu.Item>
               </Fragment>
-              : <Menu.Item
-                name='signout'
-                active={activeItem === 'signout'}
-              >
+            ) : (
+              <Menu.Item name='signout' active={activeItem === 'signout'}>
                 <Link to='/' onClick={this.handleRemoveCookies}>
                   <Icon name='sign-out' />
                   Log out
                 </Link>
-              </Menu.Item>}
+              </Menu.Item>
+            )}
           </Menu.Menu>
+          <Link to='/'>
+            <span className='hamburger' onClick={this.toggleHamburgerMenu}>
+              <svg width='25' height='25'>
+                <path d='M0,5 25,5' stroke='#fff' strokeWidth='1' />
+                <path d='M0,13 25,13' stroke='#fff' strokeWidth='1' />
+                <path d='M0,21 25,21' stroke='#fff' strokeWidth='1' />
+              </svg>
+            </span>
+          </Link>
         </Container>
       </Menu>
     )
   }
 }
+
 export default withRouter(Navbar)