Revert "sticky-panel"

This reverts commit 8960685.

pages/doc.js

@@ -159,7 +159,6 @@ export default class Documentation extends Component {
       offset: -85,
       delay: 0,
       smooth: 'ease',
-      containerId: 'bodybag',
     })
   }
 
@@ -169,7 +168,6 @@ export default class Documentation extends Component {
       offset: -85,
       delay: 0,
       smooth: 'ease',
-      containerId: 'bodybag'
     })
   }
 
@@ -186,8 +184,10 @@ export default class Documentation extends Component {
       <Page stickHeader={true}>
         <HeadInjector sectionName={sectionName} />
         <Container>
-          <Side id="doc-sidebar">
+          <Side>
             <Menu>
+              <SidebarHeading>Documentation</SidebarHeading>
+
               {/* Search */}
               <SearchArea>
                 <SearchForm />
@@ -251,61 +251,47 @@ export default class Documentation extends Component {
               </Sections>
 
               <OnlyDesktop>
-                <SideFooter>
-                  <DownloadButton />
-                </SideFooter>
+                <DownloadButton />
               </OnlyDesktop>
             </Menu>
           </Side>
 
           {pageNotFound
             ? <Page404 />
-            : (
-              <Markdown
-                markdown={markdown}
-                githubLink={githubLink}
-                section={currentSection}
-                file={currentFile}
-                onFileSelect={this.onFileSelect}
-              />
-            )}
+            : <Markdown
+            markdown={markdown}
+            githubLink={githubLink}
+            section={currentSection}
+            file={currentFile}
+            onFileSelect={this.onFileSelect}
+          />
+            }
         </Container>
       </Page>
     )
   }
 }
 
 const Container = styled.div`
+  margin-top: 93px;
   display: flex;
   flex-direction: row;
+  min-height: 80vh;
   margin-left: auto;
   margin-right: auto;
 
   ${media.phablet`
+    margin-top: 63px;
     flex-direction: column;
   `};
 `
 
 const Side = styled.div`
-  position: sticky;
-  top: 0;
-  height: calc(100vh - 80px);
   flex-basis: 33.7%;
   display: flex;
   justify-content: flex-end;
   background-color: #eef4f8;
-  overflow: auto;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    background-color: rgba(150, 150, 150, 0.5);
-    border-radius: 6px;
-    border-width: 1px 1px 1px 3px;
-  }
+  padding: 20px 10px 30px 0;
 
   ${media.phablet`
     flex-basis: auto;
@@ -317,16 +303,23 @@ const Menu = styled.div`
   max-width: 280px;
   margin-right: 18px;
   margin-left: 10px;
-  padding: 30px 10px 30px 0;
 
   ${media.phablet`
+    padding-top: 30px;
+    padding-right: 30px;
+    padding-bottom: 30px;
     width: 100%;
     max-width: none;
     margin-right: 0px;
     margin-left: 20px;
   `};
 `
 
+const SidebarHeading = styled.h3`
+  font-size: 24px;
+  color: #b0b8c5;
+`
+
 const SearchArea = styled.div`
   margin-top: 10px;
   margin-bottom: 20px;
@@ -335,7 +328,7 @@ const SearchArea = styled.div`
 `
 
 const Sections = styled.div`
-  margin-bottom: 25px;
+  margin-bottom: 40px;
   margin-top: 10px;
   min-width: 280px;
 `
@@ -417,7 +410,3 @@ const Collapse = styled.div`
   height: ${({ isOpen, items }) => isOpen ? items * 31 : 0}px;
   transition: height .3s linear;
 `
-
-const SideFooter = styled.div`
-  margin-bottom: 20px;
-`

src/Documentation/Markdown/Markdown.js

@@ -89,7 +89,7 @@ const Content = styled.article`
   box-sizing: border-box;
   min-width: 200px;
   max-width: 670px;
-  margin: 40px 15px 30px 30px;
+  margin: 30px 15px 30px 30px;
   position: relative;
 
   ${media.phablet`

src/Hero/index.js

@@ -11,6 +11,7 @@ export default ({ children }) => (
 const Hero = styled.section`
   position: relative;
   background-color: #eef4f8;
+  margin-top: 80px;
 `
 
 const Container = styled.div`

src/Layout/index.js

@@ -1,60 +1,30 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
-// components
+
+import { initGA, logPageView } from '../utils/ga'
+
 import TopMenu from '../TopMenu'
 import Footer from '../Footer'
 import HamburgerMenu from '../HamburgerMenu'
-// utils
-import { initGA, logPageView } from '../utils/ga'
-import throttle from 'lodash.throttle'
-
-function googleAnalytics() {
-  if (!window.GA_INITIALIZED) {
-    initGA()
-    window.GA_INITIALIZED = true
-  }
-  logPageView()
-}
 
 export default class Layout extends Component {
-  constructor() {
-    super()
-    this.state = {
-      scrolled: false
-    }
-    this.handleScrollThrottled = throttle(this.handleScroll, 300)
-  }
-
   componentDidMount() {
-    googleAnalytics()
-    this.bodybag = document.getElementById('bodybag');
-    this.bodybag.addEventListener('scroll', this.handleScrollThrottled)
-    this.handleScroll()
-  }
-
-  componentWillUnmount() {
-    this.bodybag.removeEventListener('scroll', this.handleScrollThrottled)
-  }
-
-  handleScroll = (e) => {
-    const scrollTop = e ? e.target.scrollTop : 0;
-    this.setState({
-      scrolled: scrollTop > 25
-    })
+    if (!window.GA_INITIALIZED) {
+      initGA()
+      window.GA_INITIALIZED = true
+    }
+    logPageView()
   }
 
   render() {
-    const { children } = this.props
-    const { scrolled } = this.state
+    const { children, stickHeader = false } = this.props
 
     return (
       <Wrapper>
-        <TopMenu scrolled={scrolled} />
+        <TopMenu />
         <HamburgerMenu />
-        <Bodybag id="bodybag" ref={ref => this.bodybag = ref}>
-          {children}
-          <Footer />
-        </Bodybag>
+        {children}
+        <Footer />
       </Wrapper>
     )
   }
@@ -63,15 +33,3 @@ export default class Layout extends Component {
 const Wrapper = styled.div`
   overflow: hidden;
 `
-
-const Bodybag = styled.div`
-  position: fixed;
-  top: 80px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  transition: top .2s linear;
-`

src/TopMenu/index.js

@@ -1,14 +1,38 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
 import { container, media } from '../styles'
+import throttle from 'lodash.throttle'
 
 import Nav from '../Nav'
 
 const MIN_HEIGHT = 78
 
 export default class TopMenu extends Component {
+  constructor() {
+    super()
+    this.state = {
+      scrolled: false
+    }
+    this.handleScrollThrottled = throttle(this.handleScroll, 300)
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScrollThrottled)
+    this.handleScroll()
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScrollThrottled)
+  }
+
+  handleScroll = () => {
+    this.setState({
+      scrolled: (window.scrollY || window.pageYOffset) > 25
+    })
+  }
+
   render() {
-    const { scrolled } = this.props
+    const { scrolled } = this.state
 
     return (
       <Wrapper>
@@ -55,7 +79,7 @@ const Container = styled.section`
   flex-shrink: 0;
   justify-content: space-between;
   align-items: center;
-  transition: height .2s linear;
+  transition: height .2s ease;
   will-change: height;
 
   ${media.phablet`