feat(docz-theme-default): include breakpoints reactive on sidebar

doczjs · Jun 25, 2018 · d3911b4 · d3911b4
1 parent 9cd6321
commit d3911b4
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 92 deletions.
diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
@@ -28,6 +28,7 @@
     "prismjs": "^1.14.0",
     "prop-types": "15.6.1",
     "react": "^16.4.0",
+    "react-breakpoints": "^3.0.0",
     "react-dom": "^16.4.0",
     "react-emotion": "^9.2.1",
     "react-feather": "^1.1.0",

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx
@@ -55,7 +55,9 @@ export const Menu: SFC<MenuProps> = ({ menu, docs, sidebarToggle }) => (
             <dl>
               {docs.map(doc => (
                 <dt key={doc.id}>
-                  <Link onClick={sidebarToggle} to={doc.route}>{doc.name}</Link>
+                  <Link onClick={sidebarToggle} to={doc.route}>
+                    {doc.name}
+                  </Link>
                 </dt>
               ))}
             </dl>

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -2,12 +2,14 @@ import React from 'react'
 import { Docs, Link, Entry, ThemeConfig } from 'docz'
 import styled from 'react-emotion'
 import { Toggle } from 'react-powerplug'
+import { Media } from 'react-breakpoints'
 
 import { Menu } from './Menu'
 import logo from '../../../images/docz.svg'
 
 interface Wrapper {
   opened: boolean
+  desktop: boolean
 }
 
 interface IconProps {
@@ -22,7 +24,7 @@ interface ToggleBackgroundProps {
   opened: boolean
 }
 
-const wrapperToggle = (p: Wrapper) => (p.opened ? '-90%' : '0')
+const wrapperToggle = (p: Wrapper) => (p.opened && !p.desktop ? '-90%' : '0')
 const IconFirst = (p: IconProps) => (p.opened ? '0px' : '12px')
 const IconMiddle = (p: IconProps) => (p.opened ? '1' : '0')
 const IconLast = (p: IconProps) => (p.opened ? '0px' : '-4px')
@@ -183,64 +185,84 @@ const Icon = styled('div')`
 `
 
 export const Sidebar = () => (
-  <Toggle initial={false}>
-    {({ on, toggle }: any) => {
-      const handleSidebarToggle = (ev: React.SyntheticEvent<any>) => {
-        toggle()
-      }
+  <Media>
+    {({ currentBreakpoint }: any) => {
       return (
-        <Docs>
-          {({ docs, menus }) => {
-            const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu)
-            const fromMenu = (menu: string) =>
-              docs.filter(doc => doc.menu === menu)
-
+        <Toggle initial={true}>
+          {({ on, toggle }: any) => {
+            const isDesktop = currentBreakpoint === 'desktop' ? true : false
+            const handleSidebarToggle = (ev: React.SyntheticEvent<any>) => {
+              if (isDesktop) return
+              toggle()
+            }
             return (
-              <React.Fragment>
-                <Wrapper opened={on}>
-                  <ToggleBlock opened={on} onClick={handleSidebarToggle}>
-                    <Icon opened={on}>
-                      <span className="icon__line" />
-                      <span className="icon__line" />
-                      <span className="icon__line" />
-                    </Icon>
-                  </ToggleBlock>
-                  <ThemeConfig>
-                    {({ title, logo }) =>
-                      logo ? (
-                        <LogoImg
-                          src={logo.src}
-                          width={logo.width}
-                          alt={title}
-                        />
-                      ) : (
-                        <LogoText>{title}</LogoText>
-                      )
-                    }
-                  </ThemeConfig>
-                  <Menus>
-                    {docsWithoutMenu.map(doc => (
-                      <Link key={doc.id} to={doc.route} onClick={handleSidebarToggle}>
-                        {doc.name}
-                      </Link>
-                    ))}
-                    {menus.map(menu => (
-                      <Menu key={menu} sidebarToggle={handleSidebarToggle} menu={menu} docs={fromMenu(menu)} />
-                    ))}
-                  </Menus>
-                  <Footer>
-                    Built with
-                    <a href="#" target="_blank">
-                      <img src={logo} width={40} alt="Docz" />
-                    </a>
-                  </Footer>
-                </Wrapper>
-                <ToggleBackground opened={on} onClick={handleSidebarToggle} />
-              </React.Fragment>
+              <Docs>
+                {({ docs, menus }) => {
+                  const docsWithoutMenu = docs.filter((doc: Entry) => !doc.menu)
+                  const fromMenu = (menu: string) =>
+                    docs.filter(doc => doc.menu === menu)
+
+                  return (
+                    <React.Fragment>
+                      <Wrapper opened={on} desktop={isDesktop}>
+                        <ToggleBlock opened={on} onClick={handleSidebarToggle}>
+                          <Icon opened={on}>
+                            <span className="icon__line" />
+                            <span className="icon__line" />
+                            <span className="icon__line" />
+                          </Icon>
+                        </ToggleBlock>
+                        <ThemeConfig>
+                          {({ title, logo }) =>
+                            logo ? (
+                              <LogoImg
+                                src={logo.src}
+                                width={logo.width}
+                                alt={title}
+                              />
+                            ) : (
+                              <LogoText>{title}</LogoText>
+                            )
+                          }
+                        </ThemeConfig>
+                        <Menus>
+                          {docsWithoutMenu.map(doc => (
+                            <Link
+                              key={doc.id}
+                              to={doc.route}
+                              onClick={handleSidebarToggle}
+                            >
+                              {doc.name}
+                            </Link>
+                          ))}
+                          {menus.map(menu => (
+                            <Menu
+                              key={menu}
+                              sidebarToggle={handleSidebarToggle}
+                              menu={menu}
+                              docs={fromMenu(menu)}
+                            />
+                          ))}
+                        </Menus>
+                        <Footer>
+                          Built with
+                          <a href="#" target="_blank">
+                            <img src={logo} width={40} alt="Docz" />
+                          </a>
+                        </Footer>
+                      </Wrapper>
+                      <ToggleBackground
+                        opened={on}
+                        onClick={handleSidebarToggle}
+                      />
+                    </React.Fragment>
+                  )
+                }}
+              </Docs>
             )
           }}
-        </Docs>
+        </Toggle>
       )
     }}
-  </Toggle>
+  </Media>
 )
diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx
@@ -1,11 +1,11 @@
 import styled from 'react-emotion'
 
 export const Table = styled('table')`
-${p =>
-  p.theme.mq({
-    overflowY: ['hidden', 'hidden', 'hidden', 'initial'],
-    display: ['block', 'block', 'block', 'table']
-  })};
+  ${p =>
+    p.theme.mq({
+      overflowY: ['hidden', 'hidden', 'hidden', 'initial'],
+      display: ['block', 'block', 'block', 'table'],
+    })};
   width: 100%;
   padding: 0;
   margin-bottom: 50px;
@@ -31,26 +31,26 @@ ${p =>
     & :nth-child(1) {
       ${p =>
         p.theme.mq({
-          width: ['20%', '20%', '20%', 'auto']
-      })};
+          width: ['20%', '20%', '20%', 'auto'],
+        })};
     }
     & :nth-child(2) {
       ${p =>
         p.theme.mq({
-          width: ['10%', '10%', '10%', 'auto']
-      })};
+          width: ['10%', '10%', '10%', 'auto'],
+        })};
     }
     & :nth-child(3) {
       ${p =>
         p.theme.mq({
-          width: ['10%', '10%', '10%', 'auto']
-      })};
+          width: ['10%', '10%', '10%', 'auto'],
+        })};
     }
     & :nth-child(4) {
       ${p =>
         p.theme.mq({
-          width: ['20%', '20%', '20%', 'auto']
-      })};
+          width: ['20%', '20%', '20%', 'auto'],
+        })};
     }
   }
 

diff --git a/packages/docz-theme-default/src/config.ts b/packages/docz-theme-default/src/config.ts
@@ -1,11 +1,12 @@
 import { styles } from './styles'
 import * as colors from './styles/colors'
 import { prismTheme } from './styles/prism-theme'
-import { mq } from './styles/responsive'
+import { mq, breakpoints } from './styles/responsive'
 
 export const config = {
   colors,
   styles,
   prismTheme,
   mq,
+  breakpoints,
 }
diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { theme, DocPreview, ThemeConfig } from 'docz'
 import { ThemeProvider } from 'emotion-theming'
+import ReactBreakpoints from 'react-breakpoints'
 
 import { config } from './config'
 import { Sidebar, Main } from './components/shared'
@@ -10,27 +11,29 @@ const Theme = () => (
   <ThemeConfig>
     {config => (
       <ThemeProvider theme={config}>
-        <Main config={config}>
-          <Sidebar />
-          <DocPreview
-            components={{
-              page: components.Page,
-              notFound: components.NotFound,
-              render: components.Render,
-              h1: components.H1,
-              h2: components.H2,
-              h3: components.H3,
-              h4: components.H4,
-              h5: components.H5,
-              h6: components.H6,
-              ul: components.List,
-              loading: components.Loading,
-              table: components.Table,
-              pre: components.Pre,
-              tooltip: components.Tooltip,
-            }}
-          />
-        </Main>
+        <ReactBreakpoints breakpoints={config.breakpoints}>
+          <Main config={config}>
+            <Sidebar />
+            <DocPreview
+              components={{
+                page: components.Page,
+                notFound: components.NotFound,
+                render: components.Render,
+                h1: components.H1,
+                h2: components.H2,
+                h3: components.H3,
+                h4: components.H4,
+                h5: components.H5,
+                h6: components.H6,
+                ul: components.List,
+                loading: components.Loading,
+                table: components.Table,
+                pre: components.Pre,
+                tooltip: components.Tooltip,
+              }}
+            />
+          </Main>
+        </ReactBreakpoints>
       </ThemeProvider>
     )}
   </ThemeConfig>

diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts
@@ -3,6 +3,7 @@ declare module 'react-powerplug'
 declare module 'react-lightweight-tooltip'
 declare module 'react-feather/dist/icons/chevron-down'
 declare module 'react-spinners'
+declare module 'react-breakpoints'
 
 declare module '*.svg' {
   const content: any