udpate it

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>{title}</title>
         </Head>
 
-        <Header onMenuAction={sidebarHandler.toggle}/>
+        <Header onMenuAction={sidebarHandler.handleToggle}/>
         <BodyContainer>
           <Sidebar 
-            toggled={sidebar.toggled}
+            visible={sidebar.visible}
             selected={sidebar.view}
             onSelect={sidebarHandler.view}/>
           <ContentContainer>
@@ -101,4 +112,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default withWidth()(App);

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 }) => (
   </StyledItem>
 )
 
-const Sidebar = ({ toggled, width, selected, onSelect }) => (
-  <Menu toggled={toggled} width={width}>
+const Sidebar = ({ visible, width, selected, onSelect }) => (
+  <Menu visible={visible} width={width}>
     <Item name="PDN" selected={selected} onSelect={onSelect}>
       <Icon><PdnIcon/></Icon>
       <Title>PDN</Title>
@@ -93,14 +93,14 @@ const Sidebar = ({ toggled, width, selected, onSelect }) => (
 )
 
 Sidebar.propTypes = {
-  toggled: PropTypes.bool,
+  visible: PropTypes.bool,
   width: PropTypes.string,
   selected: PropTypes.string,
   onSelect: PropTypes.func
 };
 
 Sidebar.defaultProps = {
-  toggled: false,
+  visible: false,
   width: "16rem",
   selected: "PDN"
 };

webui/lib/style-utils.js

@@ -14,7 +14,7 @@ export const media = ({
   `,
 
   mobile: (...args) => css`
-    @media (max-width: 600px) {
+    @media (max-width: 768px) {
         ${ css(...args) }
     }
   `
@@ -64,4 +64,4 @@ export const transitions = {
       transform: scale(0.25,0.25);
     }
   `
-}
+}

webui/lib/with-width.js

@@ -0,0 +1,83 @@
+import React, {Component} from 'react';
+import EventListener from 'react-event-listener';
+
+export const SMALL = 1;
+export const MEDIUM = 2;
+export const LARGE = 3;
+
+export default function withWidth(options = {}) {
+  const {
+    largeWidth = 992,
+    mediumWidth = 768,
+    resizeInterval = 166, // Corresponds to 10 frames at 60 Hz.
+  } = options;
+
+  return (MyComponent) => {
+    return class WithWidth extends Component {
+      state = {
+        width: null,
+      };
+
+      componentDidMount() {
+        this.updateWidth();
+      }
+
+      componentWillUnmount() {
+        clearTimeout(this.deferTimer);
+      }
+
+      handleResize = () => {
+        clearTimeout(this.deferTimer);
+        this.deferTimer = setTimeout(() => {
+          this.updateWidth();
+        }, resizeInterval);
+      };
+
+      updateWidth() {
+        const innerWidth = window.innerWidth;
+        let width;
+
+        if (innerWidth >= largeWidth) {
+          width = LARGE;
+        } else if (innerWidth >= mediumWidth) {
+          width = MEDIUM;
+        } else { // innerWidth < 768
+          width = SMALL;
+        }
+
+        if (width !== this.state.width) {
+          this.setState({
+            width: width,
+          });
+        }
+      }
+
+      render() {
+        const width = this.state.width;
+
+        /**
+         * When rendering the component on the server,
+         * we have no idea about the screen width.
+         * In order to prevent blinks and help the reconciliation
+         * we are not rendering the component.
+         *
+         * A better alternative would be to send client hints.
+         * But the browser support of this API is low:
+         * http://caniuse.com/#search=client%20hint
+         */
+        if (width === null) {
+          return null;
+        }
+
+        return (
+          <EventListener target="window" onResize={this.handleResize}>
+            <MyComponent
+              width={width}
+              {...this.props}
+            />
+          </EventListener>
+        );
+      }
+    };
+  };
+}

webui/package.json

@@ -23,6 +23,7 @@
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "react-event-listener": "^0.4.5",
     "react-icons": "^2.2.5",
     "react-onclickoutside": "^5.11.1",
     "react-transition-group": "^1.1.3",

webui/yarn.lock

@@ -1646,7 +1646,7 @@ extsprintf@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
 
-fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
   version "0.8.12"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
   dependencies:
@@ -3048,6 +3048,15 @@ react-dom@^15.5.4:
     object-assign "^4.1.0"
     prop-types "~15.5.7"
 
+react-event-listener@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.4.5.tgz#e3e895a0970cf14ee8f890113af68197abf3d0b1"
+  dependencies:
+    babel-runtime "^6.20.0"
+    fbjs "^0.8.4"
+    prop-types "^15.5.4"
+    warning "^3.0.0"
+
 react-hot-loader@3.0.0-beta.6:
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.0.0-beta.6.tgz#463fac0bfc8b63a8385258af20c91636abce75f4"