From 79879299ce4a341043ecb1ce9839dcab10a21d1e Mon Sep 17 00:00:00 2001
From: Markus Nylund <L5392@student.jamk.fi>
Date: Thu, 28 Mar 2019 12:38:54 +0200
Subject: [PATCH 1/2] start menu

---
 wearright/src/App.js             | 10 ++++--
 wearright/src/components/Menu.js | 56 ++++++++++++++++++++++++++++++++
 wearright/src/styles/Menu.css    | 46 ++++++++++++++++++++++++++
 3 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 wearright/src/components/Menu.js
 create mode 100644 wearright/src/styles/Menu.css

diff --git a/wearright/src/App.js b/wearright/src/App.js
index af74d87..b14aa91 100644
--- a/wearright/src/App.js
+++ b/wearright/src/App.js
@@ -4,16 +4,20 @@ import Start from "../src/components/Start.js"
 import Profile from "../src/components/Profile.js"
 import Cookies from 'universal-cookie';
 import MainPage from "../src/components/MainPage.js"
+import Menu from "../src/components/Menu.js"
 
 class App extends Component {
 
   render() {
-    const cookies = new Cookies();
+    return (
+      <Menu />
+    );
+    //const cookies = new Cookies();
     //const c = cookies.get('firstPage')
     //console.log("main "+ c)
 
     //if cookie exists, load main view
-    if(cookies.get('firstPage') === "true"){
+    /* if(cookies.get('firstPage') === "true"){
       return (
         <div className="App">
           <MainPage />
@@ -27,7 +31,7 @@ class App extends Component {
           <Start />
         </div>
       );
-    }
+    } */
   }
 }
 
diff --git a/wearright/src/components/Menu.js b/wearright/src/components/Menu.js
new file mode 100644
index 0000000..1ff2b8e
--- /dev/null
+++ b/wearright/src/components/Menu.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import {FaStar, FaArrowLeft, FaArrowRight, FaBars } from 'react-icons/fa';
+import "../styles/Menu.css"
+
+class Menu extends Component 
+{
+    constructor(props) {
+        super(props);  
+        this.state = {
+            currentWeather : [],
+            isLoaded: true,
+            error: null,
+            clothes: [],
+            location: []
+
+        }
+    }
+
+    render() 
+    {  
+    const {isLoaded} = this.state    
+        if(isLoaded)
+        {
+            return(
+                //HTML here
+                <div className={"content"}>
+                    <div className={"header"}>                    
+                        <div className={"menu"}>
+                        
+                            <button><FaBars className={"icons"} /></button>
+
+                            <div className={"filling"}/>
+
+                            <div className={"menubuttons"}>
+                                <button class="button">Koti</button>
+                                <button class="button">Suunnittele matka</button>
+                                <button class="button">Profiilit</button>
+                                <button class="button">Suosikit</button>
+                            </div>
+                        </div>
+                        <div className={"sidebackground"}>
+
+                        </div>
+
+                    </div>
+                </div>
+            )
+        }
+        else
+        {
+            return;
+        } 
+                                
+    }   
+}
+export default Menu;
\ No newline at end of file
diff --git a/wearright/src/styles/Menu.css b/wearright/src/styles/Menu.css
new file mode 100644
index 0000000..5438df7
--- /dev/null
+++ b/wearright/src/styles/Menu.css
@@ -0,0 +1,46 @@
+.icons
+{
+    transform: rotate(90deg);
+}
+
+.content
+{
+    display: flex;
+    flex-direction: row;
+}
+
+.menu
+{
+    width: 20%;
+    min-width: 100px;
+}
+
+.filling
+{
+    height: 20%;
+}
+
+.button
+{
+    background-color: #07c4ea;
+    cursor: pointer;
+    border: 1px solid #0aabcc;
+    padding: 5%;
+    margin: 5%;
+}
+
+.menubuttons
+{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* 
+.sidebackground
+{
+    width: 100%;
+    height: 100%;
+    background-color: grey;
+}
+*/
\ No newline at end of file
-- 
GitLab


From 126eae76883a89bfa19ce90b5bccd7683d8b9050 Mon Sep 17 00:00:00 2001
From: AP <aripekka.kauppinen@gmail.com>
Date: Thu, 4 Apr 2019 10:51:18 +0300
Subject: [PATCH 2/2] Progress

---
 wearright/src/components/MainPage.js |  6 ++-
 wearright/src/components/Menu.js     | 70 +++++++++++++---------------
 wearright/src/styles/Menu.css        | 41 ++++++++--------
 3 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/wearright/src/components/MainPage.js b/wearright/src/components/MainPage.js
index f47a112..3f16eda 100644
--- a/wearright/src/components/MainPage.js
+++ b/wearright/src/components/MainPage.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import "../styles/MainPage.css"
 import {FaStar, FaArrowLeft, FaArrowRight, FaBars } from 'react-icons/fa';
 import Cookies from 'universal-cookie';
+import Menu from '../components/Menu.js';
 
 class MainPage extends Component {
     constructor(props) {
@@ -83,6 +84,9 @@ class MainPage extends Component {
         //console.log(this.state.clothes[2])
     }
 
+    menuButtonPress() {
+
+    }
     
     render() {  
         const {currentWeather, isLoaded, clothes, location} = this.state    
@@ -94,7 +98,7 @@ class MainPage extends Component {
                             <div className={"menu"}>
                                 {/* menubutton here! from component */}
                                 {/* Test menu button */}
-                               
+                                <Menu />
                                 <button><FaBars className={"icons"} /></button>
                             </div>
                             <h1>Wear Right</h1>
diff --git a/wearright/src/components/Menu.js b/wearright/src/components/Menu.js
index 1ff2b8e..d1808f4 100644
--- a/wearright/src/components/Menu.js
+++ b/wearright/src/components/Menu.js
@@ -7,50 +7,46 @@ class Menu extends Component
     constructor(props) {
         super(props);  
         this.state = {
-            currentWeather : [],
-            isLoaded: true,
-            error: null,
-            clothes: [],
-            location: []
-
+            toggle: true
         }
-    }
 
-    render() 
-    {  
-    const {isLoaded} = this.state    
-        if(isLoaded)
-        {
-            return(
-                //HTML here
-                <div className={"content"}>
-                    <div className={"header"}>                    
-                        <div className={"menu"}>
-                        
-                            <button><FaBars className={"icons"} /></button>
-
-                            <div className={"filling"}/>
+    this.handleClick = this.handleClick.bind(this);
+    }
 
-                            <div className={"menubuttons"}>
-                                <button class="button">Koti</button>
-                                <button class="button">Suunnittele matka</button>
-                                <button class="button">Profiilit</button>
-                                <button class="button">Suosikit</button>
-                            </div>
-                        </div>
-                        <div className={"sidebackground"}>
+    handleClick(){
+        this.setState({toggle: !this.state.toggle})
+    }
 
-                        </div>
+    render()   
+    {  
+        const {toggle} = this.state
+        const show = {
+            display: "block",
+        }
+        const hide = {
+            display: "none",
+        }
 
+        return(
+            <div className={"content"}>    
+                <div className="left">
+                    <div>
+                        <button onClick={this.handleClick} className="menu"><FaBars className={"icons"} /></button>
+                        <div className={"menubuttons"} >
+                        <div style={toggle? show : hide} >
+                            <button id={"home"} className="button">Koti</button>
+                            <button id={"travel"} className="button">Suunnittele matka</button>
+                            <button id={"profile"} className="button">Profiilit</button>
+                            <button id={"favourite"} className="button">Suosikit</button>
+                        </div>             
+                        </div>            
                     </div>
+                </div>             
+                <div style={toggle ? show : hide} onClick={this.handleClick} className={"right"}>
+                  
                 </div>
-            )
-        }
-        else
-        {
-            return;
-        } 
-                                
+            </div>
+        )                             
     }   
 }
 export default Menu;
\ No newline at end of file
diff --git a/wearright/src/styles/Menu.css b/wearright/src/styles/Menu.css
index 5438df7..26a6612 100644
--- a/wearright/src/styles/Menu.css
+++ b/wearright/src/styles/Menu.css
@@ -1,7 +1,3 @@
-.icons
-{
-    transform: rotate(90deg);
-}
 
 .content
 {
@@ -9,17 +5,6 @@
     flex-direction: row;
 }
 
-.menu
-{
-    width: 20%;
-    min-width: 100px;
-}
-
-.filling
-{
-    height: 20%;
-}
-
 .button
 {
     background-color: #07c4ea;
@@ -27,6 +12,7 @@
     border: 1px solid #0aabcc;
     padding: 5%;
     margin: 5%;
+    width: 80%;
 }
 
 .menubuttons
@@ -36,11 +22,26 @@
     width: 100%;
 }
 
-/* 
-.sidebackground
+.icons
 {
-    width: 100%;
-    height: 100%;
+    transform: rotate(90deg);
+}
+
+.menu{
+    width: 45px;
+}
+.right{
+    position: absolute;
+    width: 60vw;
+    height: 100vh;
+    right: 0;
+    opacity: 0.5;
     background-color: grey;
 }
-*/
\ No newline at end of file
+.left{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 40vw;
+}
\ No newline at end of file
-- 
GitLab