From 6d121491aaa0f434e99e1b44487c73195d30beed Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Thu, 6 Aug 2020 16:24:47 -0300
Subject: [PATCH] :construction: improve useAsModal rendering

---
 client/components/Sidebar.jsx              |  2 +-
 client/components/mobile/Header.jsx        | 10 ++++++----
 client/components/useAsModal.jsx           | 13 ++++++++-----
 client/modules/IDE/pages/MobileIDEView.jsx |  3 +--
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/components/Sidebar.jsx b/client/components/Sidebar.jsx
index 93bba04d..962cff36 100644
--- a/client/components/Sidebar.jsx
+++ b/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>
diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx
index cb6702ed..7b3fbae1 100644
--- a/client/components/mobile/Header.jsx
+++ b/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;
diff --git a/client/components/useAsModal.jsx b/client/components/useAsModal.jsx
index 4e124435..52d2fc00 100644
--- a/client/components/useAsModal.jsx
+++ b/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>
-    {hasOverlay && visible && <BackgroundOverlay />}
-    <div ref={setRef}> {visible && component} </div>
-  </div>); // eslint-disable-line
+  // const Comp = styled(() => Element).attrs({ onPressClose: toggle });
+
+  const wrapper = () => (visible &&
+    <div>
+      {hasOverlay && <BackgroundOverlay />}
+      <div ref={setRef}> {Element} </div>
+    </div>); // eslint-disable-line}
 
   return [toggle, wrapper];
 };
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index a008c079..780edba0 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -97,8 +97,7 @@ const MobileIDEView = (props) => {
   />);
 
   const [toggleExplorer, Explorer] = useAsModal(<Sidebar
-    title="hahaha"
-    onPressClose={() => {}}
+    title="Files"
   />, true);
 
   // toggle sidebar starting opened