Create responsive menus into the menus folder, for mobile and Desktop

src/components/Header.js

 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 (
+const Header = ({ children, user, getUserData }) => (
   <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>
+    <DesktopContainer user={user} getUserData={getUserData} menuItems={menuItems}>{children}</DesktopContainer>
+    <MobileContainer user={user} getUserData={getUserData} menuItems={menuItems}>{children}</MobileContainer>
   </div>
-    );
-  }
-}
+)
 
 const mapStateToProps = ({ user }) => ({
   user,

src/components/menus/DesktopContainer.js

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

src/components/menus/MobileContainer.js

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