🚧 create bottom tabs

client/components/mobile/Header.jsx

@@ -3,14 +3,20 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
-const background = transparent => prop(transparent ? 'backgroundColor' : 'MobilePanel.default.background');
-const textColor = prop('primaryTextColor');
+
+const background = ({ transparent, inverted }) => prop(transparent === true
+  ? 'backgroundColor'
+  : `MobilePanel.default.${inverted === true ? 'foreground' : 'background'}`);
+
+const textColor = ({ transparent, inverted }) => prop((transparent === false && inverted === true)
+  ? 'MobilePanel.default.background'
+  : 'primaryTextColor');
 
 
 const HeaderDiv = styled.div`
   position: fixed;
   width: 100%;
-  background: ${props => background(props.transparent === true)};
+  background: ${props => background(props)};
   color: ${textColor};
   padding: ${remSize(12)};
   padding-left: ${remSize(16)};
@@ -46,9 +52,9 @@ const TitleContainer = styled.div`
 `;
 
 const Header = ({
-  title, subtitle, leftButton, children, transparent
+  title, subtitle, leftButton, children, transparent, inverted
 }) => (
-  <HeaderDiv transparent={transparent}>
+  <HeaderDiv transparent={transparent} inverted={inverted}>
     {leftButton}
     <TitleContainer padded={subtitle === null}>
       {title && <h2>{title}</h2>}
@@ -65,7 +71,8 @@ Header.propTypes = {
   subtitle: PropTypes.string,
   leftButton: PropTypes.element,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
-  transparent: PropTypes.bool
+  transparent: PropTypes.bool,
+  inverted: PropTypes.bool
 };
 
 Header.defaultProps = {
@@ -73,7 +80,8 @@ Header.defaultProps = {
   subtitle: null,
   leftButton: null,
   children: [],
-  transparent: false
+  transparent: false,
+  inverted: false
 };
 
 export default Header;

client/modules/Mobile/MobileExamples.jsx

@@ -1,16 +1,48 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { bindActionCreators } from 'redux';
+import styled from 'styled-components';
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
 import IconButton from '../../components/mobile/IconButton';
 import { ExitIcon } from '../../common/icons';
+import Footer from '../../components/mobile/Footer';
+import { prop, remSize } from '../../theme';
 
-const MobileExamples = () => (
+const FooterTab = styled.div`
+  background: ${props => prop(`MobilePanel.default.${props.selected ? 'background' : 'foreground'}`)};
+  color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
+  padding: ${remSize(16)};
+  width: 100%;
+  display: flex;
+`;
+
+const FooterTabContainer = styled.div`
+  display: flex;
+  
+  h3 { text-align: center; width: 100%;}
+`;
+
+
+const MobileExamples = () => {
+  const tabs = ['Sketches', 'Collections', 'Assets'];
+  const [selected, selectTab] = useState(tabs[0]);
+  return (
     <Screen fullscreen>
-    <Header transparent title="My Stuff">
+      <Header inverted title="My Stuff">
         <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
-  </Screen>
-);
+
+      <Footer>
+        <FooterTabContainer>
+
+          {tabs.map(tab => (
+            <FooterTab selected={tab === selected} onClick={() => selectTab(tab)}>
+              <h3>{tab}</h3>
+            </FooterTab>))
+          }
+        </FooterTabContainer>
+      </Footer>
+    </Screen>);
+};
 
 export default MobileExamples;