Add sidenav with React burger component.

app/components/Admin/Navigation.jsx

 import React from 'react'
 import { LinkContainer } from 'react-router-bootstrap'
-import { Navbar, Nav, NavItem } from 'react-bootstrap'
+import BurgerMenu from 'react-burger-menu'
+
+import '../../scss/components/_navigation'
 
 export default class Navigation extends React.Component {
 
   render () {
+    const Menu = BurgerMenu['slide']
     return (
-      <Navbar brand='Science Blogger'>
-        <Nav>
-          <LinkContainer to='/admin/manager'>
-            <NavItem>Manager</NavItem>
-          </LinkContainer>
-          <LinkContainer to='/admin/about'>
-            <NavItem>About</NavItem>
-          </LinkContainer>
-        </Nav>
-      </Navbar>
+      <Menu>
+        <p>Science Blogger</p>
+        <LinkContainer to='/admin/manager'>
+          <span>Manager</span>
+        </LinkContainer>
+        <LinkContainer to='/admin/about'>
+          <span>About</span>
+        </LinkContainer>
+      </Menu>
     )
   }
 }

app/scss/components/_navigation.scss

@@ -2,15 +2,44 @@
  * Navigation Menu for the Navigation.react
  */
 
-.navigation {
-  // .navigation__item
-  &__item {
 
-    // .navigation__item--active
-    &--active {
+/* Position and sizing of burger button */
+.bm-burger-button {
+  position: fixed;
+  width: 36px;
+  height: 30px;
+  left: 36px;
+  top: 36px;
+}
+
+/* Color/shape of burger icon bars */
+.bm-burger-bars {
+  background: #373a47;
+}
+
+/* Color of close button cross */
+.bm-cross {
+  background: #bdc3c7;
+}
 
-      color: #2196F3;
-    }
-  }
+/* Background color of sidebar */
+.bm-menu {
+  background: #373a47;
 }
 
+/* Morph shape necessary with bubble or elastic */
+.bm-morph-shape {
+  fill: #373a47;
+}
+
+/* General menu styles */
+.bm-menu {
+  padding: 2.5em 1.5em 0;
+  font-size: 1.15em;
+}
+
+/* Wrapper for item list */
+.bm-item-list {
+  color: #b8b7ad;
+  padding: 0.8em;
+}

package.json

@@ -17,45 +17,47 @@
     "bootstrap-sass": "^3.3.5",
     "cookie-parser": "~1.3.5",
     "css-loader": "^0.16.0",
-    "file-loader": "^0.8.4",
-    "html-loader": "^0.3.0",
-    "json-loader": "^0.5.3",
-    "url-loader": "^0.5.6",
     "debug": "~2.2.0",
     "dotenv": "^1.2.0",
     "express": "~4.13.1",
     "extract-text-webpack-plugin": "^0.8.1",
+    "file-loader": "^0.8.4",
     "history": "^1.9.1",
+    "html-loader": "^0.3.0",
     "immutable": "^3.7.4",
+    "imports-loader": "^0.6.5",
+    "isomorphic-fetch": "^2.1.1",
     "jade": "~1.11.0",
     "jquery": "^2.1.4",
+    "json-loader": "^0.5.3",
+    "lens-writer": "substance/lens#master",
+    "leveldown": "^1.4.1",
     "lodash": "^3.9.3",
     "morgan": "~1.6.1",
     "node-sass": "^3.1.2",
     "object-assign": "^4.0.1",
-    "isomorphic-fetch": "^2.1.1",
+    "pouchdb": "^5.0.0",
+    "pouchdb-find": "^0.5.0",
     "react": "^0.14.0",
     "react-bootstrap": "^0.25.100-react-pre.1",
+    "react-burger-menu": "^1.4.0",
     "react-dom": "^0.14.0-rc1",
     "react-helmet": "^1.0.1",
     "react-quill": "jure/react-quill",
+    "react-redux": "^4.0.0",
     "react-router": "^1.0.0-rc3",
     "react-router-bootstrap": "^0.19.0",
-    "react-redux": "^4.0.0",
     "redux-logger": "^2.0.2",
     "redux-router": "^1.0.0-beta3",
     "redux-thunk": "^0.1.0",
     "sass-loader": "^3.0.0",
+    "script-loader": "^0.6.1",
     "serve-favicon": "~2.3.0",
+    "simplemde": "^1.8.0",
     "style-loader": "^0.12.3",
-    "script-loader": "^0.6.1",
-    "lens-writer": "substance/lens#master",
     "trix": "^0.9.0",
-    "simplemde": "^1.8.0",
-    "webpack": "^1.12.2",
-    "pouchdb": "^5.0.0",
-    "leveldown": "^1.4.1",
-    "pouchdb-find": "^0.5.0"
+    "url-loader": "^0.5.6",
+    "webpack": "^1.12.2"
   },
   "devDependencies": {
     "babel-eslint": "^4.1.1",