diff --git a/app/components/Admin/Navigation.jsx b/app/components/Admin/Navigation.jsx index 827f12b5ca93b0eef033ef7cef0f6901d79abf15..06dc5fce9140c1fc6fdc041dc61a01e44403c9a8 100644 --- a/app/components/Admin/Navigation.jsx +++ b/app/components/Admin/Navigation.jsx @@ -1,21 +1,23 @@ 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> ) } } diff --git a/app/scss/components/_navigation.scss b/app/scss/components/_navigation.scss index fb1967f397146722e4a11edc021e1f6f1f7b9d0c..702970c4c5a91bf7a29818fc33c91eabc1f73452 100644 --- a/app/scss/components/_navigation.scss +++ b/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; +} diff --git a/package.json b/package.json index f2be3f2bbf39aefed3cb6d65796e679b8a16191d..a9fb38fcaa39fce8148552c4c5d0e4fd6feb6102 100644 --- a/package.json +++ b/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",