feat(site) Fixed Sidebar

Author: montogeek

DISCUSSION.md

@@ -10,13 +10,14 @@ this branch:
 
 - [ ] Finish porting the markdown process to `remark` (may require new plugins)
 - [ ] Rethink external population process
-- [ ] Extract anchors into `_content.json` via `DirectoryTreePlugin`
+- [x] Extract anchors into `_content.json` via `DirectoryTreePlugin` (Fernando)
 - [ ] Finish re-incorporating mobile sidebar
 - [ ] Re-integrate google-analytics
 - [ ] Re-incorporate `redirects.json`
-- [x] Populate page title in `server.jsx` (fernando)
+- [x] Populate page title in `server.jsx` (Fernando)
 - [ ] Finish `Navigation` component (greg)
 - [x] Add custom route for landing page (greg)
+- [x] Fixed sidebar (Fernando)
 
 Some of these should be fairly quick adds now that the site works. The two
 toughest ones are most likely the markdown parsing and external population. The

src/components/Sidebar/Sidebar.jsx

@@ -4,104 +4,37 @@ import SidebarItem from '../SidebarItem/SidebarItem';
 import '../Sidebar/Sidebar.scss';
 
 export default class Sidebar extends Component {
-  state = {
-    fixed: false,
-    availableHeight: null,
-    maxWidth: null
-  };
-
   render() {
     let { className = '', pages, currentPage } = this.props;
-    let { fixed, availableHeight, maxWidth } = this.state;
     let group;
 
-    console.log(pages);
-
     return (
-      <nav
-        className={ `sidebar ${className}` }
-        ref={ ref => this._container = ref }
-        style={{
-          position: fixed ? 'fixed' : null,
-          top: fixed ? 0 : null,
-          width: fixed ? maxWidth : null,
-          maxHeight: availableHeight
-        }}>
-
+      <nav className={`sidebar ${className}`}>
         <div className="sidebar__inner">
           <a href="https://github.com/webpack/webpack/releases">
             <Shield content="npm/v/webpack" label="webpack" />
           </a>
 
-          { pages.map((page, index) => {
+          {pages.map((page, index) => {
             let displayGroup = group !== page.group && page.group !== '-';
             group = page.group;
 
             return (
-              <div key={ `sidebar-item-${index}` }>
-                { displayGroup ? (
-                  <h4 className="sidebar__group">
-                    { group }
-                  </h4>
-                ) : null }
+              <div key={`sidebar-item-${index}`}>
+                {displayGroup ? <h4 className="sidebar__group">{group}</h4> : null}
 
                 <SidebarItem
-                  index={ index }
-                  url={ page.url }
-                  title={ page.title }
-                  anchors={ page.anchors }
-                  currentPage= { currentPage }
-                  onToggle={ this._recalculate.bind(this) } />
+                  index={index}
+                  url={page.url}
+                  title={page.title}
+                  anchors={page.anchors}
+                  currentPage={currentPage}
+                />
               </div>
             );
           })}
         </div>
-
       </nav>
     );
   }
-
-  componentDidMount() {
-    // TODO: Try using `position: sticky` instead
-    // setTimeout(
-    //   this._recalculate.bind(this),
-    //   250
-    // );
-
-    // document.addEventListener(
-    //   'scroll',
-    //   this._recalculate.bind(this)
-    // );
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener(
-      'scroll',
-      this._recalculate.bind(this)
-    );
-  }
-
-  /**
-   * Re-calculate fixed state and position
-   *
-   */
-  _recalculate() {
-    let { scrollY, innerHeight } = window;
-    let { scrollHeight } = document.body;
-    let { offsetHeight: sidebarHeight } = this._container;
-    let { offsetWidth: parentWidth, offsetHeight: parentHeight } = this._container.parentNode;
-    let headerHeight = document.querySelector('header').offsetHeight + document.querySelector('.notification-bar').offsetHeight;
-    let footerHeight = document.querySelector('footer').offsetHeight;
-    let distToBottom = scrollHeight - scrollY - innerHeight;
-
-    // Calculate the space that the footer and header are actually occupying
-    let headerSpace = scrollY > headerHeight ? 0 : headerHeight - scrollY;
-    let footerSpace = distToBottom > footerHeight ? 0 : footerHeight - distToBottom;
-
-    this.setState({
-      fixed: scrollY >= headerHeight && sidebarHeight < parentHeight,
-      availableHeight: innerHeight - headerSpace - footerSpace,
-      maxWidth: parentWidth
-    });
-  }
 }

src/components/Sidebar/Sidebar.scss

@@ -6,7 +6,6 @@
   display: none;
   width: 100%;
   max-height: 100%;
-  overflow: auto;
   will-change: transform;
 
   @include break {
@@ -16,6 +15,8 @@
 
 .sidebar__inner {
   padding: 1.5em;
+  position: sticky;
+  top: -1px;
   overflow: hidden;
 }
 

src/components/SidebarItem/SidebarItem.jsx

@@ -73,14 +73,8 @@ export default class SidebarItem extends React.Component {
    * @param {object} e - Click event
    */
   _toggle(e) {
-    let { onToggle } = this.props;
-
     this.setState({
       open: !this.state.open
-    }, () => {
-      if (typeof onToggle === 'function') {
-        onToggle();
-      }
     });
   }
 

md.js renamed to src/utilities/remark.js

@@ -2,19 +2,19 @@ var markdown = require('remark');
 var slug = require('remark-slug');
 var visit = require('unist-util-visit');
 
-module.exports = function getAnchors(content) {
+function getAnchors(content) {
   let anchors = [];
 
   markdown()
     .use(slug)
-    .use(pl)
+    .use(headings)
     .process(content, (err, file) => {
       if (err) {
         throw err;
       }
     });
 
-  function pl() {
+  function headings() {
     return function transformer(ast) {
       visit(ast, 'heading', visitor);
     };
@@ -28,4 +28,8 @@ module.exports = function getAnchors(content) {
   }
 
   return anchors;
-};
+}
+
+module.exports = {
+  getAnchors
+}

webpack.common.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const FrontMatter = require('front-matter');
-const getAnchors = require('./md');
+const { getAnchors } = require('./src/utilities/remark');
 const CleanPlugin = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');