fix(docz-theme-default): responsive position for wrapper

doczjs · Jun 22, 2018 · bb56449 · bb56449
1 parent 5f78734
commit bb56449
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -14,14 +14,17 @@ interface Wrapper {
 const wrapperToggle = (p: Wrapper) => (p.opened ? '-90%' : '0')
 
 const Wrapper = styled('div')`
+  ${p => p.theme.mq({
+    position: ['absolute', 'absolute', 'relative']
+  })};
   display: flex;
-  position: relative;
   flex-direction: column;
   height: 100%;
-  background: ${p => wrapperToggle(p) !== '0' ? p.theme.colors.white : p.theme.colors.grayLight};
+  background: ${p =>
+    wrapperToggle(p) !== '0' ? p.theme.colors.white : p.theme.colors.grayLight};
   transition: transform 0.3s, background 0.3s;
   transform: translateX(${wrapperToggle});
-  z-index: 99;
+  z-index: 100;
 
   ${p => p.theme.styles.sidebar};
 
@@ -135,7 +138,8 @@ export const Sidebar = () => (
         <Docs>
           {({ docs, menus }) => {
             const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu)
-            const fromMenu = (menu: string) => docs.filter(doc => doc.menu === menu)
+            const fromMenu = (menu: string) =>
+              docs.filter(doc => doc.menu === menu)
 
             return (
               <Wrapper opened={on}>

diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts
@@ -17,7 +17,7 @@ export const styles = {
   container: {
     padding: '50px 50px 100px',
     width: 960,
-    maxWidth: '100%'
+    maxWidth: '100%',
   },
   h1: {
     margin: '30px 0',