🚧 improve useAsModal rendering

client/components/Sidebar.jsx

@@ -23,7 +23,7 @@ const SidebarWrapper = styled.div`
 const Sidebar = ({ title, onPressClose }) => (
   <SidebarWrapper>
     {title &&
-    <Header slim title={title}>
+    <Header slim title={title} fixed={false}>
       <IconButton onPress={onPressClose} icon={ExitIcon} aria-label="Return to ide view" />
     </Header>}
   </SidebarWrapper>

client/components/mobile/Header.jsx

@@ -14,7 +14,7 @@ const textColor = ({ transparent, inverted }) => prop((transparent === false &&
 
 
 const HeaderDiv = styled.div`
-  position: fixed;
+  ${props => props.fixed && 'position: fixed;'}
   width: 100%;
   background: ${props => background(props)};
   color: ${textColor};
@@ -57,9 +57,9 @@ const TitleContainer = styled.div`
 
 const Header = ({
   title, subtitle, leftButton, children,
-  transparent, inverted, slim
+  transparent, inverted, slim, fixed
 }) => (
-  <HeaderDiv transparent={transparent} slim={slim} inverted={inverted}>
+  <HeaderDiv transparent={transparent} slim={slim} inverted={inverted} fixed={fixed}>
     {leftButton}
     <TitleContainer padded={subtitle === null}>
       {title && <h2>{title}</h2>}
@@ -79,6 +79,7 @@ Header.propTypes = {
   transparent: PropTypes.bool,
   inverted: PropTypes.bool,
   slim: PropTypes.bool,
+  fixed: PropTypes.bool,
 };
 
 Header.defaultProps = {
@@ -88,7 +89,8 @@ Header.defaultProps = {
   children: [],
   transparent: false,
   inverted: false,
-  slim: false
+  slim: false,
+  fixed: true
 };
 
 export default Header;

client/components/useAsModal.jsx

@@ -12,13 +12,16 @@ const BackgroundOverlay = styled.div`
   opacity: 0.3;
 `;
 
-export default (component, hasOverlay = false) => {
+export default (Element, hasOverlay = false) => {
   const [visible, toggle, setRef] = useModalBehavior();
 
-  const wrapper = () => (<div>
+  // const Comp = styled(() => Element).attrs({ onPressClose: toggle });
-    {hasOverlay && visible && <BackgroundOverlay />}
+
-    <div ref={setRef}> {visible && component} </div>
+  const wrapper = () => (visible &&
-  </div>); // eslint-disable-line
+    <div>
+      {hasOverlay && <BackgroundOverlay />}
+      <div ref={setRef}> {Element} </div>
+    </div>); // eslint-disable-line}
 
   return [toggle, wrapper];
 };

client/modules/IDE/pages/MobileIDEView.jsx

@@ -97,8 +97,7 @@ const MobileIDEView = (props) => {
   />);
 
   const [toggleExplorer, Explorer] = useAsModal(<Sidebar
-    title="hahaha"
+    title="Files"
-    onPressClose={() => {}}
   />, true);
 
   // toggle sidebar starting opened