⛏ switch to mobile screen by window width

Author: ghalestrilo

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => (<div>
+  <h1>Test</h1>
+</div>); //eslint-disable-line

client/routes.jsx

@@ -2,6 +2,7 @@ import { Route, IndexRoute } from 'react-router';
 import React from 'react';
 import App from './modules/App/App';
 import IDEView from './modules/IDE/pages/IDEView';
+import IDEViewMobile from './modules/IDE/pages/IDEViewMobile';
 import FullView from './modules/IDE/pages/FullView';
 import LoginView from './modules/User/pages/LoginView';
 import SignupView from './modules/User/pages/SignupView';
@@ -24,9 +25,11 @@ const onRouteChange = (store) => {
   store.dispatch(stopSketch());
 };
 
+const isMobile = () => window.innerWidth <= 760;
+
 const routes = store => (
   <Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
-    <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
+    <IndexRoute component={isMobile() ? IDEViewMobile : IDEView} onEnter={checkAuth(store)} />
     <Route path="/login" component={userIsNotAuthenticated(LoginView)} />
     <Route path="/signup" component={userIsNotAuthenticated(SignupView)} />
     <Route path="/reset-password" component={userIsNotAuthenticated(ResetPasswordView)} />
@@ -49,6 +52,7 @@ const routes = store => (
     <Route path="/:username/collections/create" component={DashboardView} />
     <Route path="/:username/collections/:collection_id" component={CollectionView} />
     <Route path="/about" component={IDEView} />
+
   </Route>
 );