diff --git a/src/features/common/Layout.js b/src/features/common/Layout.js index a056e48..aa11040 100644 --- a/src/features/common/Layout.js +++ b/src/features/common/Layout.js @@ -1,20 +1,142 @@ import React, { Component } from 'react'; +import { Link } from 'react-router-dom' import PropTypes from 'prop-types'; -import { SidePanel } from './'; +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Divider from '@material-ui/core/Divider'; +import Drawer from '@material-ui/core/Drawer'; +import Hidden from '@material-ui/core/Hidden'; +import IconButton from '@material-ui/core/IconButton'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import MenuIcon from '@material-ui/icons/Menu'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import { withStyles } from '@material-ui/core/styles'; +import matrixLogo from '../../images/matrix-logo.svg'; -export default class Layout extends Component { +const drawerWidth = 180; + +const styles = theme => ({ + root: { + display: 'flex', + }, + drawer: { + [theme.breakpoints.up('sm')]: { + width: drawerWidth, + flexShrink: 0, + }, + }, + appBar: { + marginLeft: drawerWidth, + [theme.breakpoints.up('sm')]: { + width: `calc(100% - ${drawerWidth}px)`, + }, + }, + menuButton: { + marginRight: 20, + [theme.breakpoints.up('sm')]: { + display: 'none', + }, + }, + toolbar: theme.mixins.toolbar, + drawerPaper: { + width: drawerWidth, + }, + content: { + flexGrow: 1, + padding: theme.spacing.unit * 3, + }, +}); + +class Layout extends Component { static propTypes = { children: PropTypes.node, + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, + }; + + state = { + mobileOpen: false, + }; + + handleDrawerToggle = () => { + this.setState(state => ({ mobileOpen: !state.mobileOpen })); }; render() { - return ( -
- -
- {this.props.children} + const { classes, theme } = this.props; + const { pathname } = this.props.location; + + const drawer = ( +
+
+ logo
+ + + + + + +
+ ); + + return ( +
+ + + + + + + + Synapse admin + + + + +
+
+ {this.props.children} +
); } } + +export default withStyles(styles, { withTheme: true })(Layout); diff --git a/src/features/common/Layout.scss b/src/features/common/Layout.scss index d05d76c..30cd3ac 100644 --- a/src/features/common/Layout.scss +++ b/src/features/common/Layout.scss @@ -1,5 +1,6 @@ @import '../../styles/mixins'; -.common-layout { - padding-left: 260px; +.drawer-logo { + margin: 10%; + width: 80%; } diff --git a/src/features/common/SidePanel.js b/src/features/common/SidePanel.js deleted file mode 100644 index 690f599..0000000 --- a/src/features/common/SidePanel.js +++ /dev/null @@ -1,51 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { bindActionCreators } from 'redux'; -import { connect } from 'react-redux'; -import { NavLink } from 'react-router-dom'; -import matrixLogo from '../../images/matrix-logo.svg'; -import * as actions from './redux/actions'; - -export class SidePanel extends Component { - static propTypes = { - common: PropTypes.object.isRequired, - actions: PropTypes.object.isRequired, - }; - - render() { - return ( -
-
- logo -
-
    -
  • - Users -
    • -
  • - Rooms -
    • -
-
- ); - } -} - -/* istanbul ignore next */ -function mapStateToProps(state) { - return { - common: state.common, - }; -} - -/* istanbul ignore next */ -function mapDispatchToProps(dispatch) { - return { - actions: bindActionCreators({ ...actions }, dispatch), - }; -} - -export default connect( - mapStateToProps, - mapDispatchToProps, -)(SidePanel); diff --git a/src/features/common/SidePanel.scss b/src/features/common/SidePanel.scss deleted file mode 100644 index 1275b08..0000000 --- a/src/features/common/SidePanel.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import '../../styles/mixins'; - -.common-side-panel { - position: fixed; - box-sizing: border-box; - overflow: auto; - top: 0; - left: 0; - margin: 0; - width: 260px; - height: 100%; - background-color: #EEE; - - .app-logo { - margin: 30px; - width: 200px; - } - - ul, - li { - padding: 0; - margin: 0; - list-style: none; - } - - a { - display: block; - padding: 8px; - padding-left: 24px; - text-decoration: none; - color: black; - } - a.active { - font-weight: bold; - background-color: #CCC; - } -} diff --git a/src/features/common/index.js b/src/features/common/index.js index d40f615..efe69c5 100644 --- a/src/features/common/index.js +++ b/src/features/common/index.js @@ -1,3 +1,2 @@ export { default as PageNotFound } from './PageNotFound'; -export { default as SidePanel } from './SidePanel'; export { default as Layout } from './Layout'; diff --git a/src/features/common/style.scss b/src/features/common/style.scss index c8e14dd..187be84 100644 --- a/src/features/common/style.scss +++ b/src/features/common/style.scss @@ -1,3 +1,2 @@ @import '../../styles/mixins'; -@import './SidePanel'; @import './Layout'; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index e69de29..98b6148 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -0,0 +1,40 @@ +// Small tablets and large smartphones (landscape view) +$screen-sm-min: 576px; + +// Small tablets (portrait view) +$screen-md-min: 768px; + +// Tablets and small desktops +$screen-lg-min: 992px; + +// Large tablets and desktops +$screen-xl-min: 1200px; + + +// Small devices +@mixin sm { + @media (min-width: #{$screen-sm-min}) { + @content; + } +} + +// Medium devices +@mixin md { + @media (min-width: #{$screen-md-min}) { + @content; + } +} + +// Large devices +@mixin lg { + @media (min-width: #{$screen-lg-min}) { + @content; + } +} + +// Extra large devices +@mixin xl { + @media (min-width: #{$screen-xl-min}) { + @content; + } +} diff --git a/tests/features/common/SidePanel.test.js b/tests/features/common/SidePanel.test.js deleted file mode 100644 index 39722f3..0000000 --- a/tests/features/common/SidePanel.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import { SidePanel } from '../../../src/features/common/SidePanel'; - -describe('common/SidePanel', () => { - it('renders node with correct class name', () => { - const props = { - common: {}, - actions: {}, - }; - const renderedComponent = shallow( - - ); - - expect( - renderedComponent.find('.common-side-panel').length - ).toBe(1); - }); -});