🚧 import dropdown list style from scss

client/components/Dropdown.jsx

@@ -1,6 +1,8 @@
-import PropTypes from 'prop-types';
 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';
 
 
 // <ul className="nav__dropdown">
@@ -41,14 +43,112 @@ import { Link } from 'react-router';
 
 // 'nav__item--open'
 
+// %dropdown-open {
+//   @include themify() {
+//     background-color: map-get($theme-map, 'modal-background-color');
+//     border: 1px solid map-get($theme-map, 'modal-border-color');
+//     box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
+//     color: getThemifyVariable('primary-text-color');
+//   }
+//   text-align: left;
+//   width: #{180 / $base-font-size}rem;
+//   display: flex;
+//   position: absolute;
+//   flex-direction: column;
+//   top: 95%;
+//   height: auto;
+//   z-index: 9999;
+//   border-radius: #{6 / $base-font-size}rem;
+// -------------
+//   & li:first-child {
+//     border-radius: #{5 / $base-font-size}rem #{5 / $base-font-size}rem 0 0;
+//   }
+//   & li:last-child {
+//     border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
+//   }
+//   & li {
+//     & button,
+//     & a {
+//       @include themify() {
+//         color: getThemifyVariable('primary-text-color');
+//       }
+//       width: 100%;
+//       text-align: left;
+//       padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
+//     }
+//     height: #{35 / $base-font-size}rem;
+//     cursor: pointer;
+//     display: flex;
+//     align-items: center;
+//   }
+//   & li:hover {
+//     @include themify() {
+//       background-color: getThemifyVariable('button-background-hover-color');
+//       color: getThemifyVariable('button-hover-color')
+//     }
+//     & button, & a {
+//       @include themify() {
+//         color: getThemifyVariable('button-hover-color');
+//       }
+//     }
+//   }
+// }
+
+// %dropdown-open-left {
+//   @extend %dropdown-open;
+//   left: 0;
+// }
+
+// %dropdown-open-right {
+//   @extend %dropdown-open;
+//   right: 0;
+// }
+
+
+const DropdownWrapper = styled.div`
+  background-color: ${prop('Modal.background')};
+  border: 1px solid ${prop('Modal.border')};
+  box-shadow: 0 0 18px 0 ${common.shadowColor};
+  color: ${prop('primaryTextColor')};
+
+  text-align: left;
+  width: ${remSize(180)};
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  top: 95%;
+  height: auto;
+  z-index: 9999;
+  border-radius: ${remSize(6)};
+`;
+
+
+// @include themify() {
+//   background-color: map-get($theme-map, 'modal-background-color');
+//   border: 1px solid map-get($theme-map, 'modal-border-color');
+//   box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
+//   color: getThemifyVariable('primary-text-color');
+// }
+
+
 const Dropdown = ({ items }) => (
-  <ul className="nav__dropdown">
-    {items && items.map(item => (
-      <li className="nav__dropdown-item">
+  <DropdownWrapper>
+    <h1>space</h1>
+    <h1>space</h1>
+    <h1>space</h1>
+    <h1>space</h1>
+    {/* className="nav__items-left" */}
+    <ul className="nav__items-left nav__dropdown nav__item nav__item--open">
+      <h1 className="nav__dropdown-item">hello</h1>
+      <h1 className="nav__dropdown-item">hello</h1>
+      {items && items.map(({ title }) => (
+        <li className="nav__dropdown-item" key={`nav-${title && title.toLowerCase()}`}>
+          <h1>space</h1>
         </li>
       ))
       }
     </ul>
+  </DropdownWrapper>
 );
 
 Dropdown.propTypes = {

client/modules/IDE/pages/MobileIDEView.jsx

@@ -42,10 +42,6 @@ const BottomBarContent = styled.h2`
 // const overlays = {};
 // const OverlayManager = name => overlays[name] || null;
 
-const headerNavOptions = [
-  { icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
-];
-
 
 const MobileIDEView = (props) => {
   const {
@@ -61,6 +57,10 @@ const MobileIDEView = (props) => {
 
   // const overlayActive = name => (overlay === name);
 
+  const headerNavOptions = [
+    { icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
+  ];
+
   return (
     <Screen fullscreen>
       <Header
@@ -79,6 +79,10 @@ const MobileIDEView = (props) => {
         <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
       </Header>
 
+
+      {/* TODO: Overlays */}
+      <Dropdown items={headerNavOptions} />
+
       <IDEWrapper>
         <Editor
           lintWarning={preferences.lintWarning}
@@ -115,13 +119,12 @@ const MobileIDEView = (props) => {
           provideController={setTmController}
         />
       </IDEWrapper>
+
+      {/*
       <Footer>
         <Console />
         <BottomBarContent>Bottom Bar</BottomBarContent>
-      </Footer>
-
-      {/* Overlays */}
-      <Dropdown hidden={overlay !== 'dropdown'} items={headerNavOptions} />
+      </Footer> */}
     </Screen>
   );
 };

client/theme.js

@@ -41,7 +41,8 @@ export const grays = {
 };
 
 export const common = {
-  baseFontSize: 12
+  baseFontSize: 12,
+  shadowColor: 'rgba(0, 0, 0, 0.16)'
 };
 
 export const remSize = size => `${size / common.baseFontSize}rem`;
@@ -95,6 +96,10 @@ export default {
         background: grays.light,
         border: grays.middleLight,
       },
+    },
+    Modal: {
+      background: grays.light,
+      border: grays.middleLight
     }
   },
   [Theme.dark]: {
@@ -134,6 +139,10 @@ export default {
         background: grays.dark,
         border: grays.middleDark,
       },
+    },
+    Modal: {
+      background: grays.dark,
+      border: grays.middleDark
     }
   },
   [Theme.contrast]: {
@@ -173,6 +182,10 @@ export default {
         background: grays.dark,
         border: grays.middleDark,
       },
+    },
+    Modal: {
+      background: grays.dark,
+      border: grays.middleDark
     }
   },
 };