feat: redesigning the sidebar

Using an img shield to display the webpack version
Updating the styling to match @pastelsky's comp (see #438)
Cleaning up some of the code in Sidebar and SidebarItem

Author: skipjack

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

@@ -3,81 +3,82 @@
 
 .sidebar-item {
   position: relative;
-  font-size: getFontSize(-1);
-  margin-bottom: 0.75em;
-
-  &__title {
-    padding-right: 15px;
-    font-weight: 400;
-    text-decoration: none;
-    color: inherit;
-
-    &:hover {
-      color: $text-color-highlight;
-    }
-  }
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 15px;
+  margin: 0.6em 0;
 
   &__toggle {
-    position: absolute;
-    right: 0;
-    line-height: 1.5;
+    flex: 0 0 auto;
+    margin-top: 0.125em;
+    margin-right: 0.5em;
     cursor: pointer;
-    color: getColor(dusty-grey);
-    transition: color 250ms;
-    margin-left: 1.5rem;
+    color: getColor(denim);
+    transition: all 250ms;
 
     &:hover {
       color: getColor(mine-shaft);
     }
   }
 
+  &__title {
+    flex: 1 1 auto;
+    font-weight: 600;
+    color: getColor(dove-grey);
+  }
+
   &__anchors {
-    display:none;
+    position: relative;
+    display: none;
+    flex: 0 0 100%;
+    flex-wrap: wrap;
+    margin: 0.35em 0;
+    padding-left: 1.5em;
+    overflow: hidden;
     list-style: none;
-    padding: 0;
-    margin: 0.5em 0 1em;
-  }
 
-  &__version {
-    margin-bottom: 10px;
+    &:before {
+      content: '';
+      position: absolute;
+      height: calc(100% - 0.6em);
+      top: 0;
+      left: 1.5em;
+      border-left: 1px dashed getColor(dusty-grey);
+    }
   }
 
   &__anchor {
-    margin:0.25em 0;
+    position: relative;
+    flex: 0 0 100%;
+    margin: 0.25em 0;
+    padding-left: 1em;
+    @include control-overflow;
 
-    a {
-      display: inline-block;
-      max-width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      color: getColor(dusty-grey);
+    &:first-child { margin-top: 0; }
+    &:last-child { margin-bottom: 0; }
+    &:before {
+      content: '';
+      position: absolute;
+      width: 0.5em;
+      left: 0;
+      top: 60%;
+      border-bottom: 1px dashed getColor(dusty-grey);
+    }
 
-      &:hover {
-        color: getColor(mine-shaft);
-      }
+    a {
+      color: getColor(emperor);
+      &:hover { color: getColor(denim); }
     }
   }
 
   &--open {
     .sidebar-item__anchors {
-      display:block;
-    }
-
-    .sidebar-item__title {
-      color: $text-color-highlight;
+      display: flex;
     }
 
     .sidebar-item__toggle {
-      margin-left:-2px;
-      transform:rotate(180deg) translateX(1px);
-    }
-  }
-
-  &--empty {
-    .sidebar-item__toggle,
-    .sidebar-item__anchors {
-      display: none;
+      transform-origin: center center;
+      transform: rotate(90deg);
     }
   }
 }

components/sidebar-item/sidebar-item.jsx

@@ -1,51 +1,77 @@
 import React from 'react';
 import Link from '../link/link';
 
+const block = 'sidebar-item';
+
 export default class SidebarItem extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      open: this.isOpen(props)
+      open: this._isOpen(props)
     };
   }
 
   render() {
-    let { index, url, title, anchors = [], currentPage } = this.props;
-
-    let emptyMod = !anchors.length ? 'sidebar-item--empty' : '';
-    let openMod = (this.state.open) ? 'sidebar-item--open' : '';
-    let anchorUrl = url + '#';
-    let isCurrentPage = `/${currentPage}` === url;
+    let { title, anchors = [] } = this.props;
+    let openMod = this.state.open ? `${block}--open` : '';
 
     return (
-      <div className={ `sidebar-item ${emptyMod} ${openMod}` }>
-        <Link className="sidebar-item__title" to={ url }>{ title }</Link>
-        <i className="sidebar-item__toggle icon-chevron-down" onClick={ this.toggle.bind(this) } />
-        <ul className="sidebar-item__anchors">
-          {
-            anchors.map((anchor, j) => (
-              <li className="sidebar-item__anchor" key={ `anchor-${index}-${j}` }>
-                <a href={ isCurrentPage ? `#${anchor.id}` : anchorUrl + anchor.id }>{ anchor.title}</a>
-              </li>
-            ))
-          }
-        </ul>
+      <div className={ `${block} ${openMod}` }>
+        { anchors.length > 0 ? (
+          <i 
+            className={ `${block}__toggle icon-chevron-right` } 
+            onClick={ this._toggle.bind(this) } />
+        ) : null }
+
+        <Link 
+          className={ `${block}__title` } 
+          to={ this.props.url }>
+          { title }
+        </Link>
+
+        { anchors.length > 0 ? (
+          <ul className={ `${block}__anchors` }>
+            {
+              anchors.map(anchor => (
+                <li 
+                  className={ `${block}__anchor` } 
+                  key={ `anchor-${title}-${anchor.id}` }>
+                  <a href={ this._generateAnchorURL(anchor) }>
+                    { anchor.title }
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        ) : null }
       </div>
     );
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.currentPage == this.props.currentPage) return;
-
-    this.setState({ open: this.isOpen(nextProps) });
+    if ( nextProps.currentPage !== this.props.currentPage ) {
+      this.setState({ 
+        open: this._isOpen(nextProps) 
+      });
+    }
   }
 
-  isOpen(props) {
+  /**
+   * Checks whether the item should be expanded
+   * 
+   * @param {object} props - The current props
+   */
+  _isOpen(props) {
     return `/${props.currentPage}` === props.url;
   }
 
-  toggle(e) {
+  /**
+   * Toggles the open state (expanded/collapsed)
+   * 
+   * @param {object} e - Click event
+   */
+  _toggle(e) {
     let { onToggle } = this.props;
 
     this.setState({
@@ -56,4 +82,18 @@ export default class SidebarItem extends React.Component {
       }
     });
   }
+
+  /**
+   * Generate the url for the given [anchor] depending on the current page
+   * 
+   * @return {object} anchor - The anchor object containing its id
+   */
+  _generateAnchorURL(anchor) {
+    let { currentPage, url } = this.props;
+
+    if ( `/${currentPage}` === url ) {
+      return `#${anchor.id}`;
+
+    } else return `${url}#${anchor.id}`;
+  }
 }

components/sidebar/sidebar.jsx

@@ -35,13 +35,12 @@ export default class Sidebar extends Component {
           height={ availableHeight } />
 
         <div className="sidebar__inner">
-          <h3 className="sidebar-item__version">Version 2.2</h3>
+          <img src="https://img.shields.io/badge/webpack-v2.2.1-blue.svg" />
 
           <SidebarItem
             url={ `/${sectionName}` }
             title="Introduction"
-            currentPage= { currentPage }
-          />
+            currentPage= { currentPage } />
 
           {
             pages.map(({ url, title, anchors }, i) =>

styles/partials/_mixins.scss

@@ -4,6 +4,12 @@
   }
 }
 
+@mixin control-overflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 @mixin fontantialias ($on) {
   @if $on == true {
     -webkit-font-smoothing: antialiased;