feat(sidebar): fixed sidebar on guides page

Author: rafaelrinaldi

components/sidebar-item/sidebar-item-style.scss

@@ -21,6 +21,7 @@
     cursor: pointer;
     color: getColor(dusty-grey);
     transition: color 250ms;
+    margin-left: 1.5rem;
 
     &:hover {
       color: getColor(mine-shaft);
@@ -76,4 +77,4 @@
       display: none;
     }
   }
-}
+}

components/sidebar/sidebar-style.scss

@@ -2,7 +2,7 @@
 @import 'mixins';
 
 .sidebar {
-  position: relative;
+  position: absolute;
   display: none;
   flex: 1;
   min-height: 100%;

components/sidebar/sidebar.jsx

@@ -1,31 +1,60 @@
-import React from 'react';
+import React, { Component } from 'react';
 import SidebarItem from '../sidebar-item/sidebar-item';
 
-export default props => {
-  let { sectionName, pages, currentPage } = props;
-
-  return (
-    <nav className="sidebar">
-      <div className="sidebar__inner">
-        <h3 className="sidebar-item__version">Version 2.2</h3>
-        <SidebarItem
-          url={ `/${sectionName}` }
-          title="Introduction"
-          currentPage= { currentPage }
-        />
-        {
-          pages.map(({ url, title, anchors }, i) =>
-            <SidebarItem
-              key={ `sidebar-item-${i}` }
-              index={i}
-              url={ `/${url}` }
-              title={ title }
-              anchors={ anchors }
-              currentPage= { currentPage }
-            />
-          )
-        }
-      </div>
-    </nav>
-  );
-};
+export default class Sidebar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {shouldFixSidebar: false};
+  }
+
+  componentDidMount() {
+    document.addEventListener('scroll', this.onScroll.bind(this));
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('scroll', this.onScroll.bind(this));
+  }
+
+  onScroll() {
+    let { scrollY } = window;
+    let offsetY = document.querySelector('header').offsetHeight || 55;
+    let shouldFixSidebar = scrollY >= offsetY;
+
+    this.setState({shouldFixSidebar});
+  }
+
+  render() {
+    let { sectionName, pages, currentPage } = this.props;
+    let { shouldFixSidebar } = this.state;
+
+    return (
+      <nav className="sidebar" style={ shouldFixSidebar ? {
+        position: 'fixed',
+        top: 0
+      } : null }>
+
+        <div className="sidebar__inner">
+          <h3 className="sidebar-item__version">Version 2.2</h3>
+          <SidebarItem
+            url={ `/${sectionName}` }
+            title="Introduction"
+            currentPage= { currentPage }
+          />
+          {
+            pages.map(({ url, title, anchors }, i) =>
+              <SidebarItem
+                key={ `sidebar-item-${i}` }
+                index={i}
+                url={ `/${url}` }
+                title={ title }
+                anchors={ anchors }
+                currentPage= { currentPage }
+              />
+            )
+          }
+        </div>
+        
+      </nav>
+    );
+  }
+}