aleabodo/mywebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile menu

Browse Source
This commit is contained in:
Alexander Bell 2018-09-13 08:23:17 +02:00
parent a1f7493ddf
commit d648ed1883
5 changed files with 105 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/Menu/Menu.js
View File

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

14
src/files/images/logo.svg
View File

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

1
src/pages/Login.js
View File

@ -136,6 +136,7 @@ const Login = inject("rootStore") ( observer(
return {
container: {
padding: '0%',
paddingTop: '15%',
'@media (min-width: 500px)': {
padding: '20%',
paddingTop: '10%',

15
src/pages/Main.js
View File

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

3
src/pages/VerifyEmail.js
View File

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