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)}; `;