From 26bdac454abab64721eaabfbca82099f0c41464b Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Tue, 28 Jan 2020 18:52:52 +0100
Subject: [PATCH] desktop/mobile view
---
src/components/Footer.js | 2 +-
src/components/Header.js | 172 +++++++++++++++++++--------------------
2 files changed, 84 insertions(+), 90 deletions(-)
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 095cb76..aa62a0f 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -5,7 +5,7 @@ import { Container, Segment } from 'semantic-ui-react';
const Footer = () => (
<Segment inverted vertical textAlign='center' >
<Container>
- <p textalign='center' >Created by DevTeam © 2018-2019.</p>
+ <p textalign='center' >Created by DevTeam © 2018-2020.</p>
</Container>
</Segment>
diff --git a/src/components/Header.js b/src/components/Header.js
index b0b7649..16ca78f 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -5,11 +5,11 @@ import {
Container,
Button,
Segment,
- Visibility,
Image,
Grid,
Popup,
Icon,
+ Responsive,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getUserData } from '../actions';
@@ -60,34 +60,6 @@ const menuItems = [
},
];
-const FixedMenu = ({ user }) => (
- <Menu vertical fixed='top' size='medium' pointing>
- <Container>
- {menuItems.map((item, i) =>
- (user.permission >= item.permissionLevel ||
- (item.permissionLevel === 0)
- ?
- <Menu.Item key={i} as={Link} to={item.to}>{item.text}</Menu.Item>
- :
- null))}
-
- <Menu.Menu position='right'>
- <Menu.Item className='item'>
- {
- user.id ?
- <Button.Group>
- <Button primary as={Link} to='/profile'>Profilom</Button>
- <Button as='a' href='/api/v1/logout/'icon='sign out' />
- </Button.Group>
- :
- <Button as='a' href='/api/v1/login/authsch/' >BejelentkezĂŠs</Button>
- }
- </Menu.Item>
- </Menu.Menu>
- </Container>
- </Menu>
-);
-
class Header extends Component {
constructor(props) {
super(props);
@@ -99,76 +71,98 @@ class Header extends Component {
this.props.getUserData();
}
- hideFixedMenu() {
- this.setState({ visible: false });
- }
-
- showFixedMenu() {
- this.setState({ visible: true });
+ switchHeader() {
+ this.setState( oldState => {
+ visible: !oldState.visible
+ })
}
-
render() {
const { visible } = this.state;
- return (
+ return (
<div>
- {visible ? <FixedMenu user={this.props.user} /> : null}
- <Visibility
- onBottomPassed={() => this.showFixedMenu()}
- onBottomVisible={() => this.hideFixedMenu()}
- once={false}
- >
+ <Responsive minWidth={600}>
+ <Segment inverted textAlign='center' vertical>
+ <Container>
+ <Menu inverted secondary size='large'>
+ {menuItems.map((item, i) =>
+ (item.permissionLevel === 0 ?
+ <Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
+ : null
+ ))
+ }
+ { this.props.user.id ?
+ <Popup trigger={
+ <Menu.Item>
+ <Icon name='angle down' size='large' />
+ </Menu.Item>
+ }
+ position='center'
+ flowing hoverable inverted>
+ <Menu inverted secondary size='large'>
+ {menuItems.map((item, i) =>
+ (this.props.user.permission >= item.permissionLevel
+ && item.permissionLevel > 0?
+ <Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
+ : null
+ ))
+ }
+ </Menu>
+ </Popup>
+ : null
+ }
+ <Menu.Item position='right' width={5}>
+ {
+ this.props.user.id ?
+ <Button.Group>
+ <Button inverted as={Link} to='/profile'>Profilom</Button>
+ <Button as='a' href='/api/v1/logout/' icon='sign out' />
+ </Button.Group>
+ :
+ <Button as='a' href='/api/v1/login/authsch/' inverted>BejelentkezĂŠs</Button>
+ }
+ </Menu.Item>
+ </Menu>
+ </Container>
+ </Segment>
+ </Responsive>
+ <Responsive maxWidth={599}>
<Segment inverted textAlign='center' vertical>
- <Grid verticalAlign='middle' columns={5} centered>
- <Grid.Row>
- <Menu inverted secondary size='large'>
- {menuItems.map((item, i) =>
- (item.permissionLevel === 0 ?
- <Grid.Column>
- <Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
- </Grid.Column>
- : null
- ))
+ <Container>
+ <Menu inverted secondary size='normal'>
+ <Menu.Item as={Link} to={menuItems[0].to}>{menuItems[0].prefix}{menuItems[0].text}</Menu.Item>
+ <Popup trigger={
+ <Menu.Item position='right'>
+ <Icon name='bars' size='large' />
+ </Menu.Item>
}
- <Popup trigger={
+ position='center'
+ flowing hoverable inverted>
+ <Menu vertical inverted secondary size='normal'>
+ {menuItems.map((item, i) =>
+ ( (this.props.user.permission >= item.permissionLevel ||
+ item.permissionLevel === 0) && i>0?
+ <Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
+ : null
+ ))
+ }
<Menu.Item>
- <Icon name='angle down' size='large' />
+ {
+ this.props.user.id ?
+ <Button.Group>
+ <Button inverted as={Link} to='/profile'>Profilom</Button>
+ <Button as='a' href='/api/v1/logout/' icon='sign out' />
+ </Button.Group>
+ :
+ <Button as='a' href='/api/v1/login/authsch/' inverted>BejelentkezĂŠs</Button>
+ }
</Menu.Item>
- }
- position='center'
- flowing hoverable inverted>
- <Menu inverted secondary size='large'>
- <Grid.Row>
- {menuItems.map((item, i) =>
- (this.props.user.permission >= item.permissionLevel
- && item.permissionLevel > 0?
- <Grid.Column>
- <Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
- </Grid.Column>
- : null
- ))
- }
- </Grid.Row>
- </Menu>
- </Popup>
- <Grid.Column>
- <Menu.Item floated='right' width={5}>
- {
- this.props.user.id ?
- <Button.Group>
- <Button inverted as={Link} to='/profile'>Profilom</Button>
- <Button as='a' href='/api/v1/logout/' icon='sign out' />
- </Button.Group>
- :
- <Button as='a' href='/api/v1/login/authsch/' inverted>BejelentkezĂŠs</Button>
- }
- </Menu.Item>
- </Grid.Column>
- </Menu>
- </Grid.Row>
- </Grid>
+ </Menu>
+ </Popup>
+ </Menu>
+ </Container>
</Segment>
- </Visibility>
+ </Responsive>
</div>
);
}
--
GitLab