Docs/update nav bar (#886)

* Update navbar with components hierarchy

* remove warning

* fix hover coloring

* verify window exist - fix deploy

Author: ethanshar

uilib-docs/src/components/Navbar.js renamed to uilib-docs/src/components/navbar/index.js

@@ -5,27 +5,29 @@ import PropTypes from 'prop-types';
 import Link from 'gatsby-link';
 import _ from 'lodash';
 
-import './navbar.scss';
-import searchIcon from '../images/search.svg';
+import './index.scss';
+import searchIcon from '../../images/search.svg';
+import Item from './item';
 
 class Navbar extends Component {
-  static propTypes = {
-    components: PropTypes.array
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.setFilter = this.setFilter.bind(this);
-  }
-
   state = {
     filter: ''
   };
 
-  setFilter({target: {value}}) {
+  setFilter = ({target: {value}}) => {
     this.setState({filter: value});
-  }
+  };
+
+  getCurrentPage = () => {
+    if (typeof window !== 'undefined') {
+      const path = window.location.href;
+      return _.chain(path)
+        .split('/')
+        .filter(item => !_.isEmpty(item))
+        .last()
+        .value();
+    }
+  };
 
   getMarkdownPages(data) {
     const markdownPages = data.allFile.edges;
@@ -48,35 +50,38 @@ class Navbar extends Component {
   }
 
   renderNavbar = data => {
+    const currentPage = this.getCurrentPage();
     const {filter} = this.state;
     const markdowns = this.getMarkdownPages(data);
     const components = this.getNavbarComponents(data);
 
     const filteredComponents = _.filter(components, component =>
-      _.includes(_.lowerCase(component.node.displayName), _.lowerCase(filter)));
+      _.includes(_.lowerCase(component.node.displayName), _.lowerCase(filter))
+    );
+
+    const componentsByGroups = _.groupBy(
+      filteredComponents,
+      c => _.split(c.node.displayName, '.')[0]
+    );
+
     return (
       <div className="navbar">
         <div className="search">
-          <img src={searchIcon}/>
-          <input placeholder="Search..." onChange={this.setFilter}/>
+          <img src={searchIcon} />
+          <input placeholder="Search..." onChange={this.setFilter} />
         </div>
         <ul>
           {_.map(markdowns, page => {
-            return (
-              <li>
-                <Link to={page.path}>{page.title}</Link>
-              </li>
-            );
+            return <Item id={page.title} link={page.path} />;
           })}
-          <li className="separator"/>
-          {_.map(filteredComponents, (component, index) => {
+          <li className="separator" />
+          {_.map(componentsByGroups, (components, key) => {
             return (
-              <li key={index}>
-                <Link key={component.node.displayName} to={`/docs/${component.node.displayName}/`}>
-                  {component.node.displayName}
-                  {/* {component.node.isPublic && <span className="public">public</span>} */}
-                </Link>
-              </li>
+              <Item
+                id={key}
+                components={components}
+                currentPage={currentPage}
+              ></Item>
             );
           })}
         </ul>

uilib-docs/src/components/Navbar.scss renamed to uilib-docs/src/components/navbar/index.scss

@@ -1,4 +1,4 @@
-@import "src/styles/constants";
+@import 'src/styles/constants';
 
 .navbar {
   position: fixed;
@@ -28,7 +28,6 @@
     img {
       display: inline;
       height: 16px;
-      // filter: invert(1); // turn to white
     }
 
     input {
@@ -52,44 +51,46 @@
     list-style-type: none;
     padding: 0;
     margin: 0;
-
-    .list-header {
-      // background-color: $dark40;
-      color: $white;
-      padding: 4px 0;
-    }
   }
 
   li {
     position: relative;
     border-radius: 10px;
     cursor: pointer;
     transition: all 0.2s;
-    margin: 1px 0;
+    padding: 12px 8px;
+    margin-bottom: 2px;
 
-    &.separator {
-      height: 1px;
-      background-color: $white;
-      width: 100%;
-      margin: 8px 0;
+    &:hover > a > .entry {
+      color: $yellow20;
     }
 
-    a {
+    .entry {
       color: $white;
       font-size: $text50;
-      font-weight: 500;
-      padding: 8px;
+      font-weight: 600;
       line-height: 1.4;
       width: 100%;
       display: inline-block;
       text-decoration: none;
-      margin-bottom: 2px;
-    }
 
-    &:hover {
-      a {
+      &.selected {
         color: $yellow20;
+        font-weight: 600;
       }
     }
+
+    .nested {
+      border-left: 1px solid $white;
+      margin-top: 10px;
+      padding-left: 10px;
+    }
+
+    &.separator {
+      border-bottom: 1px solid $white;
+      width: 100%;
+      margin: 8px 0;
+      padding: 0;
+    }
   }
 }

uilib-docs/src/components/navbar/item.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Link from 'gatsby-link';
+import _ from 'lodash';
+import classnames from 'classnames';
+
+export default ({id, link, components, currentPage}) => {
+  const hasChildren = _.size(components) > 1;
+  if (!hasChildren) {
+    return <ItemEntry id={id} link={link} currentPage={currentPage} />;
+  } else {
+    return (
+      <li key={id}>
+        <Link key={id} to={`/docs/${id}/`}>
+          <span class={classnames('entry', {selected: id === currentPage})}>
+            {id}
+          </span>
+        </Link>
+
+        <ul class="nested">
+          {_.map(_.drop(components, 1), c => {
+            return (
+              <ItemEntry id={c.node.displayName} currentPage={currentPage} />
+            );
+          })}
+        </ul>
+      </li>
+    );
+  }
+};
+
+const ItemEntry = ({id, link, currentPage}) => {
+  return (
+    <li key={id}>
+      <Link key={id} to={link || `/docs/${id}/`}>
+        <span class={classnames('entry', {selected: id === currentPage})}>
+          {id}
+        </span>
+      </Link>
+    </li>
+  );
+};