From f13490d84fbf49d7dc73e96be9331eb0dbeb1a18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Thu, 7 Feb 2019 17:46:38 +0100
Subject: [PATCH] Create responsive menus into the menus folder, for mobile and
Desktop
---
src/components/Header.js | 105 +++--------------------
src/components/menus/DesktopContainer.js | 103 ++++++++++++++++++++++
src/components/menus/MobileContainer.js | 77 +++++++++++++++++
3 files changed, 190 insertions(+), 95 deletions(-)
create mode 100644 src/components/menus/DesktopContainer.js
create mode 100644 src/components/menus/MobileContainer.js
diff --git a/src/components/Header.js b/src/components/Header.js
index a8ee7e3..38db7d0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,17 +1,15 @@
import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
import {
- Menu,
- Container,
- Button,
- Segment,
- Visibility,
Image,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { getUserData } from '../actions';
import KSZKlogo from './images/kszk_logo.svg';
+import MobileContainer from './menus/MobileContainer';
+import DesktopContainer from './menus/DesktopContainer';
+
+
const menuItems = [
{
text: 'FĹoldal',
@@ -51,97 +49,14 @@ const menuItems = [
},
]
-const FixedMenu = ({ user }) => (
- <Menu fixed='top' size='large' 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);
- this.state = {
- visible: false,
- };
- }
- componentWillMount() {
- this.props.getUserData();
- }
-
- hideFixedMenu() {
- this.setState({ visible: false });
- }
-
- showFixedMenu() {
- this.setState({ visible: true });
- }
-
-
-
- render() {
- const { visible } = this.state;
-
- return (
- <div>
- {visible ? <FixedMenu user={this.props.user} /> : null}
- <Visibility
- onBottomPassed={() => this.showFixedMenu()}
- onBottomVisible={() => this.hideFixedMenu()}
- once={false}
- >
- <Segment inverted textAlign='center' vertical>
- <Container>
- <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.Item position='right'>
- {
- 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>
- </Visibility>
- </div>
- );
- }
-}
+const Header = ({ children, user, getUserData }) => (
+ <div>
+ <DesktopContainer user={user} getUserData={getUserData} menuItems={menuItems}>{children}</DesktopContainer>
+ <MobileContainer user={user} getUserData={getUserData} menuItems={menuItems}>{children}</MobileContainer>
+ </div>
+)
const mapStateToProps = ({ user }) => ({
user,
diff --git a/src/components/menus/DesktopContainer.js b/src/components/menus/DesktopContainer.js
new file mode 100644
index 0000000..cc83035
--- /dev/null
+++ b/src/components/menus/DesktopContainer.js
@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import {
+ Menu,
+ Container,
+ Button,
+ Segment,
+ Visibility,
+ Responsive,
+} from 'semantic-ui-react';
+
+const FixedMenu = ({ user, menuItems }) => (
+ <Menu fixed='top' size='large' 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 DesktopContainer extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ visible: false,
+ };
+ }
+ componentWillMount() {
+ this.props.getUserData();
+ }
+
+ hideFixedMenu() {
+ this.setState({ visible: false });
+ }
+
+ showFixedMenu() {
+ this.setState({ visible: true });
+ }
+
+ render() {
+ const { visible } = this.state.visible;
+ const { children, user, menuItems } = this.props;
+ return (
+ <Responsive minWidth={768}>
+ {visible ? <FixedMenu user={this.props.user} /> : null}
+ <Visibility
+ onBottomPassed={() => this.showFixedMenu()}
+ onBottomVisible={() => this.hideFixedMenu()}
+ once={false}
+ >
+ <Segment inverted textAlign='center' vertical>
+ <Container>
+ <Menu inverted secondary stackable 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.Item position='right'>
+ {
+ 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>
+ </Visibility>
+ {children}
+ </Responsive>
+ );
+ }
+}
+
+export default DesktopContainer;
diff --git a/src/components/menus/MobileContainer.js b/src/components/menus/MobileContainer.js
new file mode 100644
index 0000000..a4dc734
--- /dev/null
+++ b/src/components/menus/MobileContainer.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import {
+ Menu,
+ Container,
+ Button,
+ Segment,
+ Image,
+} from 'semantic-ui-react';
+import KSZKlogo from './images/kszk_logo.svg';
+
+
+class MobileContainer extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ sidebarVisible: false,
+ };
+ }
+ componentWillMount() {
+ this.props.getUserData();
+ }
+
+ render() {
+ const visible = this.state.sidebarVisible;
+ const { children, user } = this.props;
+ return(
+ <Responsive maxWidth={768}>
+ <Segment inverted textAlign='center' vertical>
+ <Container>
+ <Menu inverted secondary>
+ <Menu.Item onClick={visible ? this.handleHideClick : this.handleShowClick}><Icon name='sidebar'/></Menu.Item>
+ <Image size='mini' src={KSZKlogo} style={{ marginRight: '1.5em' }} />
+ <Menu.Item position='right'>
+ {
+ 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>
+ <Sidebar.Pushable>
+ <Sidebar
+ as={Menu}
+ animation='overlay'
+ icon='labeled'
+ inverted
+ vertical
+ visible={visible}
+ width='thin'
+ >
+ {menuItems.map((item, i) =>
+ (this.props.user.permission >= item.permissionLevel ||
+ (item.permissionLevel === 0) ?
+ <Menu.Item key={i} as={Link} to={item.to} onClick={this.handleSidebarHide}>{item.text}</Menu.Item>
+ :
+ null))}
+ </Sidebar>
+ <Sidebar.Pusher onClick={this.handleSidebarHide}>
+ {children}
+ </Sidebar.Pusher>
+ </Sidebar.Pushable>
+ </Responsive>);
+ }
+
+ handleShowClick = () => this.setState({ sidebarVisible: true })
+ handleHideClick = () => this.setState({ sidebarVisible: false })
+ handleSidebarHide = () => this.setState({ sidebarVisible: false })
+}
+
+export default MobileContainer;
--
GitLab