🚧 make <Sidebar /> component

Author: ghalestrilo

client/components/Dropdown.jsx

@@ -25,7 +25,7 @@ const DropdownWrapper = styled.ul`
   display: flex;
   flex-direction: column;
   height: auto;
-  z-index: 9999;
+  z-index: 2;
   border-radius: ${remSize(6)};
 
   & li:first-child { border-radius: ${remSize(5)} ${remSize(5)} 0 0; }

client/components/Sidebar.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router';
+import styled from 'styled-components';
+import { remSize, prop, common } from '../theme';
+import Header from './mobile/Header';
+import IconButton from './mobile/IconButton';
+import { ExitIcon } from '../common/icons';
+
+
+const SidebarWrapper = styled.div`
+  height: 100%;
+  width: ${remSize(180)};
+
+  position: absolute;
+  z-index: 2;
+  left: 0;
+
+  background: white;
+  box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
+`;
+
+const Sidebar = ({ title, onPressClose }) => (
+  <SidebarWrapper>
+    {title &&
+    <Header slim title={title}>
+      <IconButton onPress={onPressClose} icon={ExitIcon} aria-label="Return to ide view" />
+    </Header>}
+  </SidebarWrapper>
+);
+
+Sidebar.propTypes = {
+  title: PropTypes.string,
+  onPressClose: PropTypes.func.isRequired,
+};
+
+Sidebar.defaultProps = {
+  title: null,
+  // onPressClose: PropTypes.func.isRequired,
+};
+
+
+export default Sidebar;

client/components/useAsModal.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useModalBehavior } from '../utils/custom-hooks';
 
+
 export default (component) => {
   const [visible, trigger, setRef] = useModalBehavior();
 

client/modules/IDE/pages/MobileIDEView.jsx

@@ -34,6 +34,7 @@ import ActionStrip from '../../../components/mobile/ActionStrip';
 import useAsModal from '../../../components/useAsModal';
 import { PreferencesIcon } from '../../../common/icons';
 import Dropdown from '../../../components/Dropdown';
+import Sidebar from '../../../components/Sidebar';
 
 const isUserOwner = ({ project, user }) =>
   project.owner && project.owner.id === user.id;
@@ -67,18 +68,13 @@ const MobileIDEView = (props) => {
     selectedFile, updateFileContent, files, user, params,
     closeEditorOptions, showEditorOptions,
     startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
-    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState
+    showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges
   } = props;
 
   const [tmController, setTmController] = useState(null); // eslint-disable-line
 
   const { username } = user;
 
-  const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown
-    items={getNatOptions(username)}
-    align="right"
-  />);
-
   // Force state reset
   useEffect(clearPersistedState, []);
   useEffect(stopSketch, []);
@@ -95,16 +91,34 @@ const MobileIDEView = (props) => {
     setCurrentProjectID(params.project_id);
   }, [params, project, username]);
 
+  const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
+    items={getNatOptions(username)}
+    align="right"
+  />);
+
+  const [toggleExplorer, Explorer] = useAsModal(<Sidebar
+    title="hahaha"
+    onPressClose={() => {}}
+  />);
+
+  // toggle sidebar starting opened
+  useEffect(toggleExplorer, []);
 
   return (
     <Screen fullscreen>
+      <Explorer />
       <Header
         title={project.name}
         subtitle={selectedFile.name}
       >
         <NavItem>
           <IconButton
-            onClick={triggerNavDropdown}
+            onClick={toggleExplorer}
+            icon={MoreIcon}
+            aria-label="Options"
+          />
+          <IconButton
+            onClick={toggleNavDropdown}
             icon={MoreIcon}
             aria-label="Options"
           />
@@ -147,6 +161,7 @@ const MobileIDEView = (props) => {
           hideRuntimeErrorWarning={hideRuntimeErrorWarning}
           runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible}
           provideController={setTmController}
+          setUnsavedChanges={setUnsavedChanges}
         />
       </IDEWrapper>
 
@@ -267,6 +282,7 @@ MobileIDEView.propTypes = {
     username: PropTypes.string,
   }).isRequired,
 
+  setUnsavedChanges: PropTypes.func.isRequired,
   getProject: PropTypes.func.isRequired,
   clearPersistedState: PropTypes.func.isRequired,
   params: PropTypes.shape({