mobile menu

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,21 +89,22 @@ const Main = inject("rootStore") ( observer(
     render() {
       const activeItem = this.state.activeItem
 
+      if(window.innerWidth > 700) {
+
+        //Desktop menu
+
         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}
-          >
+              <Menu.Item name='Home' active={activeItem === 'Home'} onClick={this.handleItemClick} as='a'>
                 Home
               </Menu.Item>
     
-          <Menu.Item name='A' active={activeItem === 'A'} onClick={this.handleItemClick}>
+              <Menu.Item name='Password manager' active={activeItem === 'Password manager'} onClick={this.handleItemClick} as='a'>
                 Password manager
               </Menu.Item>
     
@@ -97,13 +114,55 @@ const Main = inject("rootStore") ( observer(
                 </Menu.Item>
               </Menu.Menu>
             </Menu>
+            {this.props.children}
+          </div>
         );
+      } else {
+
+        //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
+        }
       }
     }
   }

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

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%',

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

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%',