From daaa9a62f4065022a9ca3881b10c2c39e2067136 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= Date: Fri, 27 Nov 2020 16:17:16 +0100 Subject: [PATCH] Add navigation drawer content and make it expandable --- src/App.js | 31 ++++----- src/components/DisruptionButton.js | 5 +- src/components/Header.js | 25 +++++-- src/components/NavigationDrawer.js | 43 +++++++++++- src/components/css/NavigationDrawer.css | 88 +++++++++++++++++++++++++ src/img/flash.svg | 44 +++++++++++++ src/img/user.svg | 22 +++++++ 7 files changed, 233 insertions(+), 25 deletions(-) create mode 100644 src/img/flash.svg create mode 100644 src/img/user.svg diff --git a/src/App.js b/src/App.js index d58efca..a0dec2e 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,6 @@ import "./App.css"; import React, { Component } from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; -import NavigationDrawer from "./components/NavigationDrawer.js"; import BottomMenu from "./components/BottomMenu.js"; import AccessToken from "./components/AccessToken.js"; import NearbyStation from "./components/NearbyStation"; @@ -17,23 +16,21 @@ import TrafficInfo from "./components/pages/TrafficInfo.js"; import "./variables.css"; class App extends Component { - render() { - return ( - -
- + render() { + return ( + +
+ + + + + - - - - - - - -
- - ); - } + +
+ + ); + } } export default App; diff --git a/src/components/DisruptionButton.js b/src/components/DisruptionButton.js index 8537e35..e29fc2f 100644 --- a/src/components/DisruptionButton.js +++ b/src/components/DisruptionButton.js @@ -1,5 +1,7 @@ import addNotification from "react-push-notification"; +import disruptIcon from '../img/flash.svg'; + const DisruptionButton = () => { const genDisrupt = () => { addNotification({ @@ -12,7 +14,8 @@ const DisruptionButton = () => { }; return ( - ); diff --git a/src/components/Header.js b/src/components/Header.js index 1a1197a..586d246 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,14 +1,31 @@ import React, { Component } from 'react'; + +import NavigationDrawer from './NavigationDrawer.js'; + import './css/Header.css'; + import navIcon from '../img/menu.svg' class Header extends Component { + constructor(props) { + super(props); + this.navDrawerElem = React.createRef(); + } + + handleClick = () => { + this.navDrawerElem.current.toggle(); + }; + render() { return ( -
- -

{this.props.title}

-
+ <> + + +
+ +

{this.props.title}

+
+ ); } } diff --git a/src/components/NavigationDrawer.js b/src/components/NavigationDrawer.js index 99df8a8..1b963b0 100644 --- a/src/components/NavigationDrawer.js +++ b/src/components/NavigationDrawer.js @@ -3,13 +3,50 @@ import './css/NavigationDrawer.css'; import DisruptionButton from "./DisruptionButton.js"; +import userIcon from '../img/user.svg'; + class NavigationDrawer extends Component { + state = { + open: false + }; + + toggle = () => { + if (this.state.open) + this.close(); + else + this.open(); + }; + + open = () => { + this.setState({ + open: true + }); + }; + + close = () => { + this.setState({ + open: false + }); + }; + render() { return ( - + <> + +
+ ); } } diff --git a/src/components/css/NavigationDrawer.css b/src/components/css/NavigationDrawer.css index e69de29..2a23464 100644 --- a/src/components/css/NavigationDrawer.css +++ b/src/components/css/NavigationDrawer.css @@ -0,0 +1,88 @@ + +#navDrawer { + width: 70vw; + height: 100%; + position: fixed; + top: 0; + left: -70vw; + background: white; + overflow: hidden; + z-index: 10; + transition: .35s; + display: flex; + flex-flow: column; +} + +.open { + left: 0 !important; +} + +#navDrawer header { + width: 100%; + padding: 4vh 0; + color: white; + font-size: 16px; + flex-basis: 15vh; + flex-direction: column; + justify-content: space-evenly; +} + +#navDrawer header img { + width: 35px; +} + +#navList { + flex-basis: 70vh; + display: flex; + flex-flow: column; + align-items: flex-start; +} + +.disruptBtn { + height: 50px; + width: 100%; + padding: 0 0 0 5vw; + display: flex; + align-items: center; + align-self: flex-start; + font-size: 14px; +} + +.disruptBtn:active { + background: rgba(0, 0, 0, 0.1); +} + +.disruptBtn img { + height: 55%; + margin-right: 10px; +} + +#clickArea { + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.75); + position: fixed; + z-index: 5; + transition: .15s; +} + +.hidden { + opacity: 0; + pointer-events: none; +} + +#navDrawer hr { + width: 90%; + margin: 0 10px 5px 0; + align-self: flex-end; + opacity: 0.5; + flex-basis: auto; +} + +#version { + align-self: flex-end; + margin-right: 10px; + font-size: 14px; + color: var(--colorDiscrete); + min-height: 50px; +} \ No newline at end of file diff --git a/src/img/flash.svg b/src/img/flash.svg new file mode 100644 index 0000000..6bebed6 --- /dev/null +++ b/src/img/flash.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/user.svg b/src/img/user.svg new file mode 100644 index 0000000..535bb95 --- /dev/null +++ b/src/img/user.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + +