diff --git a/webui/components/App.js b/webui/components/App.js
index 4f14df72e..e43c2bc03 100644
--- a/webui/components/App.js
+++ b/webui/components/App.js
@@ -1,6 +1,9 @@
import Package from '../package';
+import withWidth, { SMALL } from '../lib/with-width';
+
import { Component } from 'react';
import Head from 'next/head';
+import PropTypes from 'prop-types';
import styled from 'styled-components';
import oc from 'open-color';
@@ -38,7 +41,7 @@ const HelloWorld = styled.div`
class App extends Component {
state = {
sidebar: {
- toggled: false,
+ visible: this.props.width === SMALL ? false : true,
view: "PDN"
},
error: {
@@ -47,12 +50,17 @@ class App extends Component {
},
};
+ static propTypes = {
+ session: PropTypes.string.isRequired,
+ width: PropTypes.number.isRequired
+ }
+
sidebarHandler = {
- toggle: () => {
+ handleToggle: () => {
this.setState({
sidebar: {
...this.state.sidebar,
- toggled: !this.state.sidebar.toggled
+ visible: !this.state.sidebar.visible
}
})
},
@@ -60,7 +68,10 @@ class App extends Component {
this.setState({
sidebar: {
...this.state.sidebar,
- view: view,
+ visible: this.props.width === SMALL ?
+ !this.state.sidebar.visible :
+ this.state.sidebar.visible,
+ view: view
}
})
}
@@ -84,10 +95,10 @@ class App extends Component {
{title}
-
+
@@ -101,4 +112,4 @@ class App extends Component {
}
}
-export default App;
+export default withWidth()(App);
diff --git a/webui/components/Sidebar.js b/webui/components/Sidebar.js
index dc4bfa5d5..0bc79fcfb 100644
--- a/webui/components/Sidebar.js
+++ b/webui/components/Sidebar.js
@@ -12,7 +12,7 @@ import Test3Icon from 'react-icons/lib/md/3d-rotation'
const Menu = styled.div`
display: block;
- width: ${p => p.toggled ? '0' : p.width };
+ width: ${p => p.visible ? p.width : '0' };
transition: width .2s ease-in-out;
overflow: hidden;
padding: 1rem 0;
@@ -21,8 +21,8 @@ const Menu = styled.div`
position: absolute;
top: 4rem;
left: 0;
- width: ${p => p.toggled ? '100%' : '0'};
- height: ${p => p.toggled ? '100%' : '0'};
+ width: ${p => p.visible ? '100%' : '0'};
+ height: ${p => p.visible ? '100%' : '0'};
transition: height .2s ease-in-out;
z-index: 1;
`}
@@ -67,8 +67,8 @@ const Item = ({ children, selected, name, onSelect }) => (
)
-const Sidebar = ({ toggled, width, selected, onSelect }) => (
-