diff --git a/client/modules/Mobile/MobileDashboard.jsx b/client/modules/Mobile/MobileDashboard.jsx
index c08a01ee..4358e68e 100644
--- a/client/modules/Mobile/MobileDashboard.jsx
+++ b/client/modules/Mobile/MobileDashboard.jsx
@@ -11,6 +11,9 @@ import SketchList from '../IDE/components/SketchList';
import CollectionList from '../IDE/components/CollectionList';
import AssetList from '../IDE/components/AssetList';
import Content from './MobileViewContent';
+import { SketchSearchbar } from '../IDE/components/Searchbar';
+
+const EXAMPLE_USERNAME = 'p5';
const FooterTab = styled.div`
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
@@ -20,34 +23,35 @@ const FooterTab = styled.div`
display: flex;
`;
-const FooterTabContainer = styled.div`
+const Subheader = styled.div`
+
+ .searchbar {
+ display: flex;
+ * {
+ border-radius: 0px;
+ }
+ }
+ .searchbar__input { width: 100%; }
+`;
+
+
+const FooterTabSwitcher = styled.div`
display: flex;
h3 { text-align: center; width: 100%; }
`;
-// switch (tabKey) {
-// case TabKey.assets:
-// return ;
-// case TabKey.collections:
-// return ;
-// case TabKey.sketches:
-// default:
-// return ;
-// }
-
const Panels = {
Sketches: props => ,
- Collections: () => ,
- Assets: () =>
+ Collections: props => ,
+ Assets: props =>
};
const MobileDashboard = ({ username }) => {
- // const tabs = ['Sketches', 'Collections', 'Assets'];
const Tabs = Object.keys(Panels);
const [selected, selectTab] = useState(Tabs[0]);
- const isExamples = username === 'p5';
+ const isExamples = username === EXAMPLE_USERNAME;
return (
@@ -56,14 +60,17 @@ const MobileDashboard = ({ username }) => {
-
+
+
+
+
{Panels[selected] && Panels[selected]({ username })}
);
diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx
index 5e8a5c48..d4e09dbe 100644
--- a/client/modules/Mobile/MobileViewContent.jsx
+++ b/client/modules/Mobile/MobileViewContent.jsx
@@ -5,5 +5,5 @@ import { remSize } from '../../theme';
export default styled.div`
z-index: 0;
- margin-top: ${remSize(68)};
+ margin-top: ${props => remSize(props.slimheader ? 50 : 68)};
`;