feat(SideNav): init

BREAKING CHANGE: `<LeftNav />` is no more.  use `<SideNav />`.
Transition will be painless--API is ~unchanged.

src/components/SideNav/SideNav.examples.md

@@ -0,0 +1,27 @@
+#### Basic
+
+```js
+const iconDashboard = require('../../assets/icon_mainav_dash_selected.svg');
+const iconOperations = require('../../assets/icon_mainav_ops_selected.svg');
+
+<SideNav style={{maxHeight: '200px', minHeight: '200px'}}>
+  <SideNav.MenuItem active image={iconDashboard} />
+  <SideNav.MenuItem image={iconOperations} />
+</SideNav>
+```
+
+#### Scaled
+
+```js
+const iconDashboard = require('../../assets/icon_mainav_dash_selected.svg');
+const iconOperations = require('../../assets/icon_mainav_ops_selected.svg');
+
+<SideNav style={{maxHeight: '200px', minHeight: '200px', width: '100px'}}>
+  <SideNav.MenuItem>
+    <img src={iconDashboard} style={{ height: '75px', width: '75px' }} />
+  </SideNav.MenuItem>
+  <SideNav.MenuItem active>
+    <img src={iconOperations} style={{ height: '75px', width: '75px' }} />
+  </SideNav.MenuItem>
+</SideNav>
+```

src/components/SideNav/SideNav.jsx

@@ -0,0 +1,26 @@
+import './side-nav.css'
+import classnames from 'classnames'
+import SideNavMenuItem from './SideNavMenuItem'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const SideNav = props => {
+  const { className, children, ...rest } = props
+  return (
+    <nav
+      className={classnames(className, 'octagon nav')}
+      {...rest}
+    >
+      {children}
+    </nav>
+  )
+}
+SideNav.MenuItem = SideNavMenuItem
+SideNav.propTypes = {
+  /** One of: MenuItem, Node */
+  children: PropTypes.node
+}
+
+SideNav.defaultProps = {}
+
+export default SideNav

src/components/SideNav/SideNavMenuItem.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+/**
+ * Menu item for navigation menu
+ * @param {*} props
+ */
+function SideNavMenuItem (props) {
+  const { active, image, className, children, ...rest } = props
+  const iconClasses = cx('icon_container', `icon_container--${active ? 'active' : 'inactive'}`)
+  return (
+    <li className={cx('nav__item', className)} {...rest}>
+      {active ? <div className='nav_border--active' /> : null}
+      <div className={iconClasses}>
+        {image ? <img src={image} /> : null}
+        {children}
+      </div>
+    </li>
+  )
+}
+
+SideNavMenuItem.defaultProps = {
+  active: false,
+  image: ''
+}
+
+SideNavMenuItem.propTypes = {
+  active: PropTypes.bool,
+  /** image URI */
+  image: PropTypes.string
+}
+
+export default SideNavMenuItem

src/components/SideNav/side-nav.css

@@ -0,0 +1,54 @@
+@import '../../styles/variables.css';
+.octagon.nav {
+  background: color(var(--cloudburst));
+  color: var(--white);
+  display: inline-block;
+  list-style: none;
+  min-width: 65px;
+  position: relative;
+
+  & .nav__item {
+    align-items: center;
+    color: var(--white);
+    display: flex;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+  }
+
+  & .nav_border--active {
+    border-left: 4px solid var(--white);
+    height: 75%;
+    left: 0;
+    position: absolute;
+  }
+
+  & .icon_container {
+    align-items: center;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 2rem;
+    justify-content: center;
+    padding: 10px 0 10px 0;
+    transition: opacity 400ms;
+  }
+
+  & .nav__item img {
+    height: 50px;
+    width: 50px;
+  }
+
+  & .icon_container--active {
+    opacity: 1;
+    & :hover{
+      opacity: 1;
+    }
+  }
+
+  & .icon_container--inactive {
+    opacity: .4;
+  }
+  & .icon_container--inactive:hover{
+    opacity: .7;
+  }
+}

src/components/index.js

@@ -4,7 +4,7 @@ export { default as CircleChart } from './charts/CircleChart/CircleChart'
 
 export { default as FavoriteButton } from './FavoriteButton/FavoriteButton'
 export { default as LargeCard } from './LargeCard/LargeCard'
-export { default as LeftNav } from './LeftNav/LeftNav'
+export { default as SideNav } from './SideNav/SideNav'
 export { default as MicroCard } from './MicroCard/MicroCard'
 export {
   default as NotificationItem

src/components/unstable/Layout/Layout.examples.md

@@ -44,10 +44,10 @@ const logo = require('../../../assets/tripwire-logo.png');
     </TopNav>
   </Layout.Header>
   <Layout.Nav>
-    <LeftNav style={{maxHeight: '200px', minHeight: '200px'}}>
-      <LeftNav.MenuItem active image={iconDashboard} />
-      <LeftNav.MenuItem image={iconOperations} />
-    </LeftNav>
+    <SideNav style={{maxHeight: '200px', minHeight: '200px'}}>
+      <SideNav.MenuItem active image={iconDashboard} />
+      <SideNav.MenuItem image={iconOperations} />
+    </SideNav>
   </Layout.Nav>
   <Layout.Body style={{padding: '10px'}}>
     <h1>Body</h1>