♻️ make dropdown left/rightable

Author: ghalestrilo

client/components/Dropdown.jsx

@@ -13,8 +13,9 @@ const DropdownWrapper = styled.ul`
   color: ${prop('primaryTextColor')};
 
   position: absolute;
-  top: ${remSize(64)};
-  right: ${remSize(16)};
+  right: ${props => (props.right ? 0 : 'initial')};
+  left: ${props => (props.left ? 0 : 'initial')};
+
 
   text-align: left;
   width: ${remSize(180)};
@@ -56,8 +57,8 @@ const DropdownWrapper = styled.ul`
 // TODO: Add Icon to the left of the items in the menu
 // const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
 
-const Dropdown = ({ items }) => (
-  <DropdownWrapper>
+const Dropdown = ({ items, right, left }) => (
+  <DropdownWrapper right={right} left={left}>
     {/* className="nav__items-left" */}
     {items && items.map(({ title, icon, href }) => (
       <li key={`nav-${title && title.toLowerCase()}`}>
@@ -72,6 +73,8 @@ const Dropdown = ({ items }) => (
 );
 
 Dropdown.propTypes = {
+  right: PropTypes.bool,
+  left: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.shape({
     action: PropTypes.func,
     icon: PropTypes.func,
@@ -81,6 +84,8 @@ Dropdown.propTypes = {
 
 Dropdown.defaultProps = {
   items: [],
+  right: false,
+  left: false,
 };
 
 export default Dropdown;

client/components/OverlayManager.jsx

@@ -1,29 +1,8 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 
-import Dropdown from './Dropdown';
-
-import { PreferencesIcon } from '../common/icons';
-import { useModalBehavior } from '../utils/custom-hooks';
-
-
 const OverlayManager = ({ overlay, hideOverlay }) => {
-  const headerNavOptions = [
-    {
-      icon: PreferencesIcon,
-      title: 'Preferences',
-      href: '/mobile/preferences',
-    },
-    { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
-    {
-      icon: PreferencesIcon,
-      title: 'Original Editor',
-      href: '/mobile/preferences',
-    },
-  ];
-
-  // const setRef = useModalBehavior(hideOverlay);
   // const [visible, trigger, setRef] = useModalBehavior();
 
   const jsx = (

client/components/mobile/Header.jsx

@@ -31,7 +31,9 @@ const HeaderDiv = styled.div`
 
 const IconContainer = styled.div`
   margin-left: ${props => (props.leftButton ? remSize(32) : remSize(4))};
+  list-style: none;
   display: flex;
+  flex-direction: horizontal;
 `;
 
 

client/modules/App/App.jsx

@@ -34,7 +34,8 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {/* FIXME: remove false */}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/IDE/pages/MobileIDEView.jsx

@@ -67,13 +67,9 @@ const MobileIDEView = (props) => {
   } = props;
 
   const [tmController, setTmController] = useState(null); // eslint-disable-line
-  const [overlayName, setOverlay] = useState(null); // eslint-disable-line
 
-  // TODO: Move this to OverlayController (?)
-  const hideOverlay = () => setOverlay(null);
-  // const overlayRef = useRef({});
 
-  const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown items={headerNavOptions} />);
+  const [triggerNavDropdown, NavDropDown] = useAsModal(<Dropdown right items={headerNavOptions} />);
 
   return (
     <Screen fullscreen>
@@ -84,12 +80,17 @@ const MobileIDEView = (props) => {
           <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
         }
       >
-        <IconButton
-          onClick={triggerNavDropdown}
-          icon={MoreIcon}
-          aria-label="Options"
-        />
-        <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
+        <li style={{ position: 'relative' }}>
+          <IconButton
+            onClick={triggerNavDropdown}
+            icon={MoreIcon}
+            aria-label="Options"
+          />
+          <NavDropDown />
+        </li>
+        <li>
+          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
+        </li>
       </Header>
 
       <IDEWrapper>
@@ -107,9 +108,7 @@ const MobileIDEView = (props) => {
           editorOptionsVisible={ide.editorOptionsVisible}
           showEditorOptions={showEditorOptions}
           closeEditorOptions={closeEditorOptions}
-          showKeyboardShortcutModal={showKeyboardShortcutModal}
-          setUnsavedChanges={setUnsavedChanges}
-          isPlaying={ide.isPlaying}
+          showKeyboard={ide.isPlaying}
           theme={preferences.theme}
           startRefreshSketch={startRefreshSketch}
           stopSketch={stopSketch}
@@ -133,12 +132,6 @@ const MobileIDEView = (props) => {
         {ide.consoleIsExpanded && <Expander expanded><Console /></Expander>}
         <ActionStrip />
       </Footer>
-      <NavDropDown />
-      {/* <OverlayManager
-        // ref={overlayRef}
-        overlay={overlayName}
-        hideOverlay={hideOverlay}
-      /> */}
     </Screen>
   );
 };