feat(docs): make categories collapsible

docs/src/components/DocsLayout.tsx

@@ -4,10 +4,9 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { withRouter } from 'react-router'
 
-import { Route } from 'react-router-dom'
 import Sidebar from 'docs/src/components/Sidebar/Sidebar'
 import { scrollToAnchor } from 'docs/src/utils'
-import { getUnhandledProps, mergeThemes } from 'src/lib'
+import { mergeThemes } from 'src/lib'
 
 const anchors = new AnchorJS({
   class: 'anchor-link',
@@ -67,8 +66,9 @@ class DocsLayout extends React.Component<any, any> {
     })
   }
 
-  renderChildren = props => {
-    const { component: Children, render } = this.props
+  renderChildren() {
+    const { children, render } = this.props
+    const sidebarWidth = '270px'
 
     return (
       <>
@@ -86,19 +86,17 @@ class DocsLayout extends React.Component<any, any> {
             },
           })}
         >
-          <Sidebar />
+          <Sidebar width={sidebarWidth} />
         </Provider>
-        <div role="main" style={{ marginLeft: 250 }}>
-          {render ? render() : <Children {...props} />}
+        <div role="main" style={{ marginLeft: sidebarWidth }}>
+          {render ? render() : children}
         </div>
       </>
     )
   }
 
   render() {
-    const unhandledProps = getUnhandledProps(DocsLayout, this.props)
-
-    return <Route {...unhandledProps} render={this.renderChildren} />
+    return this.renderChildren()
   }
 }
 

docs/src/components/MarkdownPage.tsx

@@ -4,7 +4,6 @@ import { Header } from '@stardust-ui/react'
 import * as React from 'react'
 import { RouteProps } from 'react-router'
 
-import DocsLayout from 'docs/src/components/DocsLayout'
 import { link } from 'docs/src/utils/helpers'
 import DocPage from 'docs/src/components/DocPage'
 import GuidesNavigationFooter, { PageDescriptor } from 'docs/src/components/GuidesNavigationFooter'
@@ -39,21 +38,16 @@ const components = {
 }
 
 const MarkdownPage: React.FunctionComponent<MarkdownPageProps> = props => {
-  const { page, ...rest } = props
+  const { page } = props
   const { default: Component, meta } = page
 
   return (
-    <DocsLayout
-      {...rest}
-      render={() => (
-        <DocPage title={meta.title}>
-          <MDXProvider components={components}>
-            <Component />
-          </MDXProvider>
-          <GuidesNavigationFooter previous={meta.previous} next={meta.next} />
-        </DocPage>
-      )}
-    />
+    <DocPage title={meta.title}>
+      <MDXProvider components={components}>
+        <Component />
+      </MDXProvider>
+      <GuidesNavigationFooter previous={meta.previous} next={meta.next} />
+    </DocPage>
   )
 }