Add navigation drawer content and make it expandable
This commit is contained in:
André Wahlberg
parent
38a6f7c786
commit
daaa9a62f4
31
src/App.js
31
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 (
|
||||
<Router>
|
||||
<div className="App">
|
||||
<NavigationDrawer />
|
||||
render() {
|
||||
return (
|
||||
<Router>
|
||||
<div className="App">
|
||||
<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} />
|
||||
<Route path="/tickets" exact component={Tickets} />
|
||||
<Route path="/ticketsBuy" exact component={TicketsBuy} />
|
||||
<Route path="/travel" exact component={Travel} />
|
||||
<Route path="/traffic" exact component={TrafficInfo} />
|
||||
|
||||
<BottomMenu />
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
<BottomMenu />
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -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 (
|
||||
<button onClick={genDisrupt} id="disruptBtn">
|
||||
<button onClick={genDisrupt} className="disruptBtn">
|
||||
<img src={disruptIcon} alt="" />
|
||||
Generera Störning
|
||||
</button>
|
||||
);
|
||||
|
||||
@ -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 (
|
||||
<header>
|
||||
<button id="navBtn"><img src={navIcon} alt="" /></button>
|
||||
<h1 id="pageTitle">{this.props.title}</h1>
|
||||
</header>
|
||||
<>
|
||||
<NavigationDrawer ref={this.navDrawerElem} />
|
||||
|
||||
<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 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 (
|
||||
<div id="navDrawer">
|
||||
<DisruptionButton />
|
||||
</div>
|
||||
<>
|
||||
<div id="navDrawer" className={`${this.state.open ? "open" : ""}`}>
|
||||
<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 |
Loading…
Reference in New Issue
Block a user