Add navigation drawer content and make it expandable
This commit is contained in:
André Wahlberg
31
src/App.js
31
src/App.js
@@ -4,7 +4,6 @@ import "./App.css";
|
|||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { BrowserRouter as Router, Route } from "react-router-dom";
|
import { BrowserRouter as Router, Route } from "react-router-dom";
|
||||||
|
|
||||||
import NavigationDrawer from "./components/NavigationDrawer.js";
|
|
||||||
import BottomMenu from "./components/BottomMenu.js";
|
import BottomMenu from "./components/BottomMenu.js";
|
||||||
import AccessToken from "./components/AccessToken.js";
|
import AccessToken from "./components/AccessToken.js";
|
||||||
import NearbyStation from "./components/NearbyStation";
|
import NearbyStation from "./components/NearbyStation";
|
||||||
@@ -17,23 +16,21 @@ import TrafficInfo from "./components/pages/TrafficInfo.js";
|
|||||||
import "./variables.css";
|
import "./variables.css";
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<NavigationDrawer />
|
<Route path="/" exact component={TicketsBuy} />
|
||||||
|
<Route path="/tickets" exact component={Tickets} />
|
||||||
|
<Route path="/ticketsBuy" exact component={TicketsBuy} />
|
||||||
|
<Route path="/travel" exact component={Travel} />
|
||||||
|
<Route path="/traffic" exact component={TrafficInfo} />
|
||||||
|
|
||||||
<Route path="/" exact component={TicketsBuy} />
|
<BottomMenu />
|
||||||
<Route path="/tickets" exact component={Tickets} />
|
</div>
|
||||||
<Route path="/ticketsBuy" exact component={TicketsBuy} />
|
</Router>
|
||||||
<Route path="/travel" exact component={Travel} />
|
);
|
||||||
<Route path="/traffic" exact component={TrafficInfo} />
|
}
|
||||||
|
|
||||||
<BottomMenu />
|
|
||||||
</div>
|
|
||||||
</Router>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import addNotification from "react-push-notification";
|
import addNotification from "react-push-notification";
|
||||||
|
|
||||||
|
import disruptIcon from '../img/flash.svg';
|
||||||
|
|
||||||
const DisruptionButton = () => {
|
const DisruptionButton = () => {
|
||||||
const genDisrupt = () => {
|
const genDisrupt = () => {
|
||||||
addNotification({
|
addNotification({
|
||||||
@@ -12,7 +14,8 @@ const DisruptionButton = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button onClick={genDisrupt} id="disruptBtn">
|
<button onClick={genDisrupt} className="disruptBtn">
|
||||||
|
<img src={disruptIcon} alt="" />
|
||||||
Generera Störning
|
Generera Störning
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,14 +1,31 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
import NavigationDrawer from './NavigationDrawer.js';
|
||||||
|
|
||||||
import './css/Header.css';
|
import './css/Header.css';
|
||||||
|
|
||||||
import navIcon from '../img/menu.svg'
|
import navIcon from '../img/menu.svg'
|
||||||
|
|
||||||
class Header extends Component {
|
class Header extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.navDrawerElem = React.createRef();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClick = () => {
|
||||||
|
this.navDrawerElem.current.toggle();
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<header>
|
<>
|
||||||
<button id="navBtn"><img src={navIcon} alt="" /></button>
|
<NavigationDrawer ref={this.navDrawerElem} />
|
||||||
<h1 id="pageTitle">{this.props.title}</h1>
|
|
||||||
</header>
|
<header>
|
||||||
|
<button id="navBtn"><img src={navIcon} alt="" onClick={this.handleClick} /></button>
|
||||||
|
<h1 id="pageTitle">{this.props.title}</h1>
|
||||||
|
</header>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,13 +3,50 @@ import './css/NavigationDrawer.css';
|
|||||||
|
|
||||||
import DisruptionButton from "./DisruptionButton.js";
|
import DisruptionButton from "./DisruptionButton.js";
|
||||||
|
|
||||||
|
import userIcon from '../img/user.svg';
|
||||||
|
|
||||||
|
|
||||||
class NavigationDrawer extends Component {
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div id="navDrawer">
|
<>
|
||||||
<DisruptionButton />
|
<div id="navDrawer" className={`${this.state.open ? "open" : ""}`}>
|
||||||
</div>
|
<header>
|
||||||
|
<img src={userIcon} alt="" />
|
||||||
|
<span>Mitt konto</span>
|
||||||
|
<span>example@gmail.com</span>
|
||||||
|
</header>
|
||||||
|
<div id="navList">
|
||||||
|
<DisruptionButton />
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<span id="version">Projektgrupp 3 - Utmaning 7</span>
|
||||||
|
</div>
|
||||||
|
<div id="clickArea" className={`${this.state.open ? "" : "hidden"}`} onClick={this.close} />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
44
src/img/flash.svg
Normal file
44
src/img/flash.svg
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M400.268,175.599c-1.399-3.004-4.412-4.932-7.731-4.932h-101.12l99.797-157.568c1.664-2.628,1.766-5.956,0.265-8.678
|
||||||
|
C389.977,1.69,387.109,0,384.003,0H247.47c-3.234,0-6.187,1.826-7.637,4.719l-128,256c-1.323,2.637-1.178,5.777,0.375,8.294
|
||||||
|
c1.562,2.517,4.301,4.053,7.262,4.053h87.748l-95.616,227.089c-1.63,3.883-0.179,8.388,3.413,10.59
|
||||||
|
c1.382,0.845,2.918,1.254,4.446,1.254c2.449,0,4.864-1.05,6.537-3.029l273.067-324.267
|
||||||
|
C401.206,182.161,401.667,178.611,400.268,175.599z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1005 B |
22
src/img/user.svg
Normal file
22
src/img/user.svg
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 460.8 460.8" style="enable-background:new 0 0 460.8 460.8;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M230.4,0c-65.8,0-119.6,53.8-119.6,119.6s53.8,119.6,119.6,119.6s119.6-53.8,119.6-119.6S296.3,0,230.4,0z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="st0" d="M435.8,334.9c-3.1-7.8-7.3-15.2-12-21.9c-24-35.5-61.1-59-102.9-64.8c-5.2-0.5-11,0.5-15.2,3.7
|
||||||
|
c-21.9,16.2-48.1,24.6-75.2,24.6s-53.3-8.4-75.2-24.6c-4.2-3.1-9.9-4.7-15.2-3.7c-41.8,5.7-79.4,29.3-102.9,64.8
|
||||||
|
c-4.7,6.8-8.9,14.6-12,21.9c-1.6,3.1-1,6.8,0.5,9.9c4.2,7.3,9.4,14.6,14.1,20.9c7.3,9.9,15.2,18.8,24,27.2
|
||||||
|
c7.3,7.3,15.7,14.1,24,20.9c41.3,30.8,90.9,47,142.1,47s100.8-16.2,142.1-47c8.4-6.3,16.7-13.6,24-20.9c8.4-8.4,16.7-17.2,24-27.2
|
||||||
|
c5.2-6.8,9.9-13.6,14.1-20.9C436.8,341.7,437.3,338,435.8,334.9z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
Reference in New Issue
Block a user