Added burger menu component

src/__test__/Menu.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import BurgerMenu from '../components/BurgerMenu/BurgerMenu';
+import { HBar, NavWrapper } from '../components/BurgerMenu/style';
+
+it('should render three horizontal bars', () => {
+  const MenuWindow = shallow(<BurgerMenu />);
+  expect(MenuWindow.find(HBar).length).toBe(3);
+});
+
+describe('should correctly set styles of each bar', () => {
+  it('second bar disappears after clicking', () => {
+    const MenuWindow = shallow(<BurgerMenu />);
+    MenuWindow.find(NavWrapper).simulate('click');
+    const Bar2 = MenuWindow.find(HBar).at(1);
+    expect(Bar2.prop('style')).toEqual('opacity: 0;');
+  });
+});

src/components/BurgerMenu/BurgerMenu.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { HBar, NavWrapper } from './style';
+
+class BurgerMenu extends React.Component {
+  state = {
+    isNavOpen: false
+  };
+
+  render() {
+    return (
+      <NavWrapper>
+        <HBar />
+        <HBar />
+        <HBar />
+      </NavWrapper>
+    );
+  }
+}
+
+export default BurgerMenu;

src/components/BurgerMenu/index.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+import SharedTitle from '../Utils/SharedTitle';
+import BurgerMenu from './BurgerMenu';
+
+export default class BurgerMenuDemo extends Component {
+  render() {
+    return (
+      <div>
+        <SharedTitle />
+        <p>
+          This is an animated burger menu. The implementation is fairly
+          straightforward with the help of styled components and css animations.
+        </p>
+        <hr />
+        <BurgerMenu />
+      </div>
+    );
+  }
+}

src/components/BurgerMenu/style.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const width = 200;
+const heightInPercent = 0.15;
+
+const HBar = styled.div`
+  width: ${width}px;
+  height: ${width * heightInPercent}px;
+  background-color: white;
+  margin: ${width * (1 - heightInPercent * 3) / 4}px auto;
+`;
+const NavWrapper = styled.div`
+  display: block;
+  padding: 20px;
+  width: ${width}px;
+  height: ${width}px;
+  background-color: black;
+  text-align: center;
+`;
+
+export { HBar, NavWrapper };

src/components/Nav/index.js

@@ -5,15 +5,38 @@ import { NavUl, NavLi } from './style.js';
 
 const Nav = () =>
   <NavUl>
-    <NavLi><NavLink to="/" exact={true}>Home</NavLink></NavLi>
-    <NavLi><NavLink to="/toggle">Toggle</NavLink></NavLi>
-    <NavLi><NavLink to="/tabs">Tabs</NavLink></NavLi>
-    <NavLi><NavLink to="/counter">Counter</NavLink></NavLi>
-    <NavLi><NavLink to="/modal">Modal</NavLink></NavLi>
-    <NavLi><NavLink to="/slideshow">Slide</NavLink></NavLi>
-    <NavLi><NavLink to="/form">Form</NavLink></NavLi>
-    <NavLi><NavLink to="/fetcher">Fetcher</NavLink></NavLi>
-    <NavLi><NavLink to="/tabss">Test 404</NavLink></NavLi>
+    <NavLi>
+      <NavLink to="/" exact={true}>
+        Home
+      </NavLink>
+    </NavLi>
+    <NavLi>
+      <NavLink to="/toggle">Toggle</NavLink>
+    </NavLi>
+    <NavLi>
+      <NavLink to="/tabs">Tabs</NavLink>
+    </NavLi>
+    <NavLi>
+      <NavLink to="/counter">Counter</NavLink>
+    </NavLi>
+    <NavLi>
+      <NavLink to="/modal">Modal</NavLink>
+    </NavLi>
+    <NavLi>
+      <NavLink to="/slideshow">Slide</NavLink>
+    </NavLi>
+    <NavLi>
+      <NavLink to="/form">Form</NavLink>
+    </NavLi>
+    <NavLi>
+      <NavLink to="/fetcher">Fetcher</NavLink>
+    </NavLi>
+    <NavLi>
+      <NavLink to="/Menu">Menu</NavLink>
+    </NavLi>
+    <NavLi>
+      <NavLink to="/tabss">404</NavLink>
+    </NavLi>
   </NavUl>;
 
 export default Nav;

src/routes.js

@@ -12,6 +12,7 @@ import SlideShowDemo from './components/SlideShow';
 import CounterDemo from './components/Counter';
 import FormDemo from './components/Form';
 import FetcherDemo from './components/Fetcher';
+import BurgerMenuDemo from './components/BurgerMenu';
 import NotFound from './components/NotFound';
 
 const Routes = props =>
@@ -30,6 +31,7 @@ const Routes = props =>
             <Route path="/slideshow" component={SlideShowDemo} />
             <Route path="/form" component={FormDemo} />
             <Route path="/fetcher" component={FetcherDemo} />
+            <Route path="/menu" component={BurgerMenuDemo} />
             <Route component={NotFound} />
           </Switch>
         </ComponentWrapper>