Add navigation drawer content and make it expandable

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";
@@ -21,8 +20,6 @@ class App extends Component {
 		return (
 			<Router>
 				<div className="App">
-          <NavigationDrawer />
-
 					<Route path="/" exact component={TicketsBuy} />
 					<Route path="/tickets" exact component={Tickets} />
 					<Route path="/ticketsBuy" exact component={TicketsBuy} />

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 (
-      <button onClick={genDisrupt} id="disruptBtn">
+      <button onClick={genDisrupt} className="disruptBtn">
+        <img src={disruptIcon} alt="" />
         Generera Störning
       </button>
   );

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 (
+            <>
+                <NavigationDrawer ref={this.navDrawerElem} />
+
                 <header>
-                <button id="navBtn"><img src={navIcon} alt="" /></button>
+                    <button id="navBtn"><img src={navIcon} alt="" onClick={this.handleClick} /></button>
                     <h1 id="pageTitle">{this.props.title}</h1>
                 </header>
+            </>
         );
     }
 }

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 (
-            <div id="navDrawer">
+            <>
+                <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} />
+            </>
         );
     }
 }

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;
+}

src/img/flash.svg

@@ -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>

src/img/user.svg

@@ -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>