Overlay

src/components/Overlay/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { OverlayWrapper } from './styles';
+
+const Overlay = ({ isActive }) => {
+  return <OverlayWrapper isActive={isActive} />;
+};
+
+export { Overlay };
+export default Overlay;

src/components/Overlay/styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const OverlayWrapper = styled.div`
+  background-color: black;
+  width: 100%;
+  min-height: 100vh;
+  overflow: hidden;
+  z-index: 2;
+  display: ${({ isActive }) => (isActive ? 'block' : 'none')};
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0.7;
+`;

src/components/index.js

@@ -1,3 +1,4 @@
 export { Sidebar } from './Sidebar';
 export { Job } from './Job';
 export { Header } from './Header';
+export { Overlay } from './Overlay';

src/pages/main/index.js

@@ -3,8 +3,9 @@ import React from 'react';
 import Header from '@components/Header';
 import Sidebar from '@components/Sidebar';
 import JobList from '@components/JobList';
+//import Overlay from '@components/Overlay';
 
-import { MainBackground, MainContainer, MainWrapper } from './styles';
+import { MainBackground, MainContainer, MainWrapper, Overlay } from './styles';
 
 const Main = () => (
   <>
@@ -14,6 +15,7 @@ const Main = () => (
         <MainWrapper>
           <JobList />
         </MainWrapper>
+        <Overlay />
         <Sidebar />
       </MainContainer>
     </MainBackground>

src/pages/main/styles.js

@@ -31,4 +31,12 @@ const WidgetWrapper = styled.div`
   padding: 20px;
 `;
 
+export const MainBackground = styled.div`
+  background-image: url(${background});
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  z-index: 100%;
+`;
+
 export const MainWrapper = WidgetWrapper;

src/sdk/body/AppView/index.js

@@ -7,6 +7,7 @@ import fx from '@assets/images/fx.svg';
 import fxBottom from '@assets/images/fx_bot.svg';
 
 import Sidebar from '@components/Sidebar/content';
+import { Overlay } from '@components/Overlay';
 
 import { Wrapper, Texture, Content, MobileMenu } from './style';
 
@@ -67,6 +68,9 @@ const AppView = ({ children }) => {
         src={fxBottom}
         alt="bottom fx"
       />
+      <span onClick={() => setSidebar(!sidebar)}>
+        <Overlay isActive={sidebar} />
+      </span>
     </Wrapper>
   );
 };