add bottom navigation basics

components/bottomnavigation/BottomNavigation.scss

@@ -0,0 +1,47 @@
+@import "../../css/base";
+
+.BottomNavigation {
+  position: relative;
+  height: 100%;
+}
+
+.BottomNavigation-content {
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.BottomNavigation-menu {
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 -3px 7px rgba(0, 0, 0, 0.08);
+  border-top: 1px solid #f1f1f1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 56px;
+  display: flex;
+}
+
+.BottomNavigation-menu-item {
+  text-decoration: none;
+  min-width: 80px;
+  padding-top: 6px;
+  padding-bottom: 10px;
+  padding-left: 12px;
+  padding-right: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  flex-grow: 1;
+  svg {
+    fill: #757575;
+  }
+  color: #757575;
+}
+
+.BottomNavigation-menu-item.active {
+  svg {
+    fill: $blue-dark;
+  }
+  color: $blue-dark;
+}

components/bottomnavigation/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import {Link} from 'react-router'
+
+export default class BottomNavigation extends React.Component {
+  render () {
+    const {children, links} = this.props
+    return (
+      <div className='BottomNavigation'>
+        <div className='BottomNavigation-content'>
+          {children}
+        </div>
+        <div className='BottomNavigation-menu'>
+          {links.map(link => (
+            <Link activeClassName='active' to={link.link} className='BottomNavigation-menu-item' key={link.text}>
+              {link.icon}
+              <div className='BottomNavigation-menu-item-text'>{link.text}</div>
+            </Link>
+            ))}
+        </div>
+      </div>
+    )
+  }
+}

examples/css/styles.scss

@@ -1,5 +1,6 @@
 
 @import "../../css/base";
+@import "../../components/bottomnavigation/BottomNavigation";
 @import "../../components/button/Button";
 @import "../../components/card/Card";
 @import "../../components/checkbox/Checkbox";

examples/js/script.js

@@ -2,6 +2,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import {HashRouter, Match} from 'react-router'
+import BottomNavigationRoute from './components/bottomnavigationRoute'
 import ButtonRoute from './components/buttonRoute'
 import CardRoute from './components/cardRoute'
 import CheckboxRoute from './components/checkboxRoute'
@@ -43,6 +44,7 @@ class App extends React.Component {
   render () {
     const links = [
       {text: 'Home', link: '/'},
+      {text: 'Bottom Navigation', link: '/bottomnavigation'},
       {text: 'Button', link: '/button'},
       {text: 'Card', link: '/card'},
       {text: 'Checkbox', link: '/checkbox'},
@@ -74,6 +76,7 @@ class App extends React.Component {
           )} />
           <main>
             <Match exactly pattern='/' component={HomeRoute} />
+            <Match pattern='/bottomnavigation' component={BottomNavigationRoute} />
             <Match pattern='/button' component={ButtonRoute} />
             <Match pattern='/card' component={CardRoute} />
             <Match pattern='/checkbox' component={CheckboxRoute} />

index.js

@@ -1,4 +1,4 @@
-
+export BottomNavigation from './components/bottomnavigation'
 export Button from './components/button/'
 export {Card, Title, Actions, Text, Content} from './components/card/'
 export Checkbox from './components/checkbox/'