Hamburger menu

src/App.js

@@ -1,12 +1,27 @@
 import React, { Component } from 'react';
 import './App.css';
 import Header from './Header';
+import Menu from './Menu';
 
 class App extends Component {
+  constructor(props) {
+  	super(props);
+  	this.state = {
+  	  isMenuVisible: false,
+  	};
+  }
+
+  handleHamburgerClick() {
+  	this.setState({
+  		isMenuVisible: !this.state.isMenuVisible,
+  	});
+  }
+
   render() {
     return (
       <div className="App">
-        <Header />
+        <Header onClick={() => this.handleHamburgerClick()} />
+      	<Menu isVisible={this.state.isMenuVisible} />
       </div>
     );
   }

src/Header.css

@@ -7,15 +7,13 @@
   line-height: 54px;
 }
 
-a {
+.c-mobile-header-left {
   height: 54px;
   position: absolute;
   vertical-align: middle;
 
   background: rgba(255, 255, 255, 0.99);
-}
 
-.c-mobile-header-left {
   top: 0;
   bottom: 0;
   left: 0;
@@ -29,9 +27,16 @@ a {
   color: #303030;
 
   z-index: 600;
+  cursor: pointer;
 }
 
 .c-mobile-header-logo {
+  height: 54px;
+  position: absolute;
+  vertical-align: middle;
+
+  background: rgba(255, 255, 255, 0.99);
+
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -42,7 +47,7 @@ a {
   z-index: 500;
 }
 
-img {
+.c-mobile-header-logo-image {
   vertical-align: middle;
   width: 100%;
   max-height: 24px;

src/Header.js

@@ -6,8 +6,8 @@ class Header extends Component {
   render() {
     return (
       <div className="c-mobile-header">
-      	<a class="c-mobile-header-left" href="#"><i class="fa fa-bars"></i></a>
-      	<a class="c-mobile-header-logo" href="/"><img src={logo} type="text/css" /></a>
+      	<a class="c-mobile-header-left" onClick={() => this.props.onClick()}><i class="fa fa-bars"></i></a>
+      	<a class="c-mobile-header-logo" href="/"><img src={logo} class="c-mobile-header-logo-image" type="text/css" /></a>
       </div>
     );
   }

src/Menu.css

@@ -0,0 +1,22 @@
+.c-mobile-menu.visible {
+  background-color: white;
+  opacity: 0.90;
+  margin-top: 54px;
+  width: 33%;
+  color: #0070c9;
+  position: absolute;
+  height: calc(100vh - 54px);
+  min-height: calc(100vh - 54px);
+  top: 0;
+  z-index: 700;
+  border-right: 1px solid #DADADA;
+}
+
+.c-mobile-menu.invisible {
+  display: none;
+}
+
+.c-mobile-menu__header {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}

src/Menu.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import './Menu.css';
+import MenuListing from './MenuListing';
+import MenuAds from './MenuAds';
+
+class Menu extends Component {
+  render() {
+    const isVisible = this.props.isVisible ? 'visible' : 'invisible';
+    return (
+      <div className="c-mobile-menu">
+        <div className={`c-mobile-menu ${isVisible}`}>
+          <div class="c-mobile-menu__header"><strong>Categories</strong></div>
+          <MenuListing />
+          <MenuAds />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Menu;

src/MenuAds.css

@@ -0,0 +1,9 @@
+.c-mobile-menuads {
+  /*height: screen height - header bar - menu header - menu items - margins - ad box borders*/
+  height: calc(100vh - 54px - 38.4px - 227.2px - 45px - 4px);
+}
+
+.c-mobile-menuads__ad {
+  height: 50%;
+  border: 1px solid #DADADA;
+}

src/MenuAds.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import './MenuAds.css';
+
+class MenuAds extends Component {
+  render() {
+    return (
+      <div className="c-mobile-menuads">
+        <div class="c-mobile-menuads__ad">
+          Ad #1
+        </div>
+        <div class="c-mobile-menuads__ad">
+          Ad #2
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MenuAds;

src/MenuItem.css

@@ -0,0 +1,12 @@
+.c-mobile-menuitem {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #0070c9;
+  font-size: 16px;
+  color: white;
+  text-align: center;
+}

src/MenuItem.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './MenuItem.css';
+
+class MenuItem extends Component {
+  render() {
+    return (
+      <div className="c-mobile-menuitem">
+      	<strong>{this.props.category}</strong>
+      </div>
+    );
+  }
+}
+
+export default MenuItem;

src/MenuListing.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import './MenuListing.css';
+import MenuItem from './MenuItem';
+
+class MenuListing extends Component {
+  render() {
+    return (
+      <div className="MenuListing">
+        <MenuItem category='News' />
+    	  <MenuItem category='Culture' />
+    	  <MenuItem category='Features' />
+    	  <MenuItem category='Opinion' />
+        <MenuItem category='Sports' />
+        <MenuItem category='Blog' />
+        <MenuItem category='Science' />
+        <MenuItem category='Events' />
+      </div>
+    );
+  }
+}
+
+export default MenuListing;