Add navigation drawer content and make it expandable

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 (
-            <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>
+            </>
         );
     }
 }

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">
-                <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} />
+            </>
         );
     }
 }

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