From d648ed1883a9e92861821449ca1f09d26b99bc01 Mon Sep 17 00:00:00 2001
From: Alexander Bell <mail@alexbell.de>
Date: Thu, 13 Sep 2018 08:23:17 +0200
Subject: [PATCH] mobile menu

---
 src/components/Menu/Menu.js | 111 +++++++++++++++++++++++++++---------
 src/files/images/logo.svg   |  14 ++---
 src/pages/Login.js          |   1 +
 src/pages/Main.js           |  15 ++++-
 src/pages/VerifyEmail.js    |   3 +-
 5 files changed, 105 insertions(+), 39 deletions(-)

diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js
index 745cec9..4d380a1 100644
--- a/src/components/Menu/Menu.js
+++ b/src/components/Menu/Menu.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import { observer, inject } from 'mobx-react';
 import jss from 'jss';
 import preset from 'jss-preset-default';
-import { Menu, Button } from 'semantic-ui-react'
+import { Menu, Icon, Sidebar, Button } from 'semantic-ui-react';
 
 /*
 * Functions import
@@ -44,9 +44,12 @@ const Main = inject("rootStore") ( observer(
       this.stores = this.props.rootStore.stores;
 
       this.handleItemClick = this.handleItemClick.bind(this);
+      this.handleButtonClick = this.handleButtonClick.bind(this);
+      this.handleSidebarHide = this.handleSidebarHide.bind(this);
 
       this.state = {
-        activeItem: 'Home'
+        activeItem: 'Home',
+        visible: false
       }
 
       //Styles
@@ -65,7 +68,20 @@ const Main = inject("rootStore") ( observer(
 
     handleItemClick(e, { name }) {
       this.setState({ 
-        activeItem: name
+        activeItem: name,
+        visible: false
+      });
+    }
+
+    handleButtonClick() {
+      this.setState({
+        visible: true
+      });
+    }
+
+    handleSidebarHide() {
+      this.setState({
+        visible: false
       });
     }
 
@@ -73,37 +89,80 @@ const Main = inject("rootStore") ( observer(
     render() {
       const activeItem = this.state.activeItem
 
-      return(
-        <Menu stackable fixed="top">
-          <Menu.Item header>
-            <img alt="" src={require('../../files/images/logo.svg')} style={{display: 'block', width: '60px', height: '45px'}} />
-          </Menu.Item>
+      if(window.innerWidth > 700) {
 
-          <Menu.Item
-            name='Home'
-            active={activeItem === 'Home'}
-            onClick={this.handleItemClick}
-          >
-            Home
-          </Menu.Item>
+        //Desktop menu
 
-          <Menu.Item name='A' active={activeItem === 'A'} onClick={this.handleItemClick}>
-            Password manager
-          </Menu.Item>
+        return(
+          <div>
+            <Menu stackable fixed="top">
+              <Menu.Item header>
+                <img alt="" src={require('../../files/images/logo.svg')} style={{display: 'block', width: '60px', height: '45px'}} />
+              </Menu.Item>
+    
+              <Menu.Item name='Home' active={activeItem === 'Home'} onClick={this.handleItemClick} as='a'>
+                Home
+              </Menu.Item>
+    
+              <Menu.Item name='Password manager' active={activeItem === 'Password manager'} onClick={this.handleItemClick} as='a'>
+                Password manager
+              </Menu.Item>
+    
+              <Menu.Menu position='right'>
+                <Menu.Item>
+                  <Button primary onClick={this.stores.authStore.signOut}>Sign out</Button>
+                </Menu.Item>
+              </Menu.Menu>
+            </Menu>
+            {this.props.children}
+          </div>
+        );
+      } else {
 
-          <Menu.Menu position='right'>
-            <Menu.Item>
-              <Button primary onClick={this.stores.authStore.signOut}>Sign out</Button>
-            </Menu.Item>
-          </Menu.Menu>
-        </Menu>
-      );
+        //Mobile sidebar
+
+        return(
+          <div>
+            <Sidebar.Pushable>
+              <Sidebar
+                as={Menu}
+                animation='overlay'
+                onHide={this.handleSidebarHide}
+                visible={this.state.visible}
+                vertical
+                width='thin'
+              >
+                <Menu.Item header>
+                  <img alt="" src={require('../../files/images/logo.svg')} style={{display: 'block', width: '60px', height: '45px'}} />
+                </Menu.Item>
+
+                <Menu.Item name="Home" active={activeItem === 'Home'} onClick={this.handleItemClick} as='a'>
+                  Home
+                </Menu.Item>
+
+                <Menu.Item name="Password manager" active={activeItem === 'Password manager'} onClick={this.handleItemClick} as='a'>
+                  Password manager
+                </Menu.Item>
+              </Sidebar>
+
+              <Sidebar.Pusher dimmed={this.state.visible}>
+                <Icon className={this.classes.burgerButton} link color="red" size="huge" name="bars" onClick={this.handleButtonClick} />
+                {this.props.children}
+              </Sidebar.Pusher>
+            </Sidebar.Pushable>
+          </div>
+        )
+      }
+      
     }
 
 
     getStyles() {
       return {
-        
+        burgerButton: {
+          position: 'fixed',
+          zIndex: 1
+        }
       }
     }
   }
diff --git a/src/files/images/logo.svg b/src/files/images/logo.svg
index d50d1ae..8f9fa58 100644
--- a/src/files/images/logo.svg
+++ b/src/files/images/logo.svg
@@ -15,41 +15,35 @@
     .a {
       opacity: 1;
       font-size: 24px;
-      animation: fontFadeA 3s;
+      animation: fontFadeA 4s;
     }
 
     .b {
       opacity: 1;
       font-size: 24px;
-      animation: fontFadeB 3s;
+      animation: fontFadeB 3.5s;
     }
 
     @keyframes fontFadeA {
       0% {
-        font-size: 20px;
         opacity: 0;
       }
-      40% {
+      20% {
         opacity: 0;
-        font-size: 20px;
       }
       100% {
         opacity: 1;
-        font-size: 24px;
       }
     }
     @keyframes fontFadeB {
       0% {
         opacity: 0;
-        font-size: 20px;
       }
-      50% {
+      30% {
         opacity: 0;
-        font-size: 20px;
       }
       100% {
         opacity: 1;
-        font-size: 24px;
       }
     }
 
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 81cad09..9ce03e1 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -136,6 +136,7 @@ const Login = inject("rootStore") ( observer(
       return {
         container: {
           padding: '0%',
+          paddingTop: '15%',
           '@media (min-width: 500px)': {
             padding: '20%',
             paddingTop: '10%',
diff --git a/src/pages/Main.js b/src/pages/Main.js
index f15c615..dffabf2 100644
--- a/src/pages/Main.js
+++ b/src/pages/Main.js
@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import jss from 'jss';
 import preset from 'jss-preset-default';
+import { Segment, Container } from 'semantic-ui-react'
 
 /*
 * Functions import
@@ -55,7 +56,15 @@ class Main extends Component {
   render() {
     return(
       <div>
-        <Menu />
+        <Menu>
+          <div style={{minHeight: '100vh'}}>
+            <Container className={this.classes.mainContainer}>
+              <Segment>
+                awdawd
+              </Segment>
+            </Container>
+          </div>
+        </Menu>
       </div>
     );
   }
@@ -63,7 +72,9 @@ class Main extends Component {
 
   getStyles() {
     return {
-      
+      mainContainer: {
+        paddingTop: '80px'
+      }
     }
   }
 }
diff --git a/src/pages/VerifyEmail.js b/src/pages/VerifyEmail.js
index c966b24..e75e3b5 100644
--- a/src/pages/VerifyEmail.js
+++ b/src/pages/VerifyEmail.js
@@ -65,7 +65,7 @@ class VerifyEmail extends Component {
           <Segment padded="very">
           <Message warning>
             <Message.Header>Pease verify your email adress</Message.Header>
-            <p>Please check your emails and follow the instructions. Check your spam foulder if you didn't get it.</p>
+            <p>Please check your emails and follow the instructions. Check your spam folder if you didn't get it.</p>
             <p>Reload this page after:</p>
             <Button primary onClick={this.reload}>Reload</Button>
           </Message>
@@ -80,6 +80,7 @@ class VerifyEmail extends Component {
     return {
       container: {
         padding: '0%',
+        paddingTop: '15%',
         '@media (min-width: 500px)': {
           padding: '20%',
           paddingTop: '10%',