add scroll handler

components/bottomnavigation/BottomNavigation.scss

@@ -2,14 +2,22 @@
 
 .BottomNavigation {
   position: relative;
+  overflow: hidden;
   height: 100%;
 }
 
 .BottomNavigation-content {
   height: 100%;
+}
+
+.BottomNavigation-content > * {
   overflow-y: scroll;
+  padding-bottom: 56px;
+  height: 100%;
+  box-sizing: border-box;
 }
 
+
 .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;
@@ -19,6 +27,14 @@
   right: 0;
   height: 56px;
   display: flex;
+  background-color: white;
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+  transition: transform 0.3s 0.1s ease;
+}
+
+.BottomNavigation.scrolling .BottomNavigation-menu {
+  transform: translate3d(0, 110%, 0);
 }
 
 .BottomNavigation-menu-item {

components/bottomnavigation/index.js

@@ -3,10 +3,37 @@ import {Link} from 'react-router'
 import classNames from 'classnames'
 
 export default class BottomNavigation extends React.Component {
+
+  state = {
+    scrolling: false
+  }
+
+  onScroll = () => {
+    if (this.scrollTimer) {
+      clearTimeout(this.scrollTimer)
+    }
+    if (!this.state.scrolling) {
+      this.setState({
+        scrolling: true
+      })
+    }
+    this.scrollTimeout = setTimeout(() => {
+      this.setState({
+        scrolling: false
+      })
+    }, 1000)
+  }
+
+  componentWillUnmount () {
+    if (this.scrollTimer) {
+      clearTimeout(this.scrollTimer)
+    }
+  }
+
   render () {
     const {children, links, inverted} = this.props
     return (
-      <div className='BottomNavigation'>
+      <div onScroll={this.onScroll} className={classNames('BottomNavigation', {scrolling: this.state.scrolling})}>
         <div className='BottomNavigation-content'>
           {children}
         </div>

examples/js/components/bottomnavigationRoute.js

@@ -0,0 +1,119 @@
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {HashRouter, Match, Link} from 'react-router'
+import Playground from 'component-playground'
+import {BottomNavigation, Icon, List, Row} from '../../../'
+
+const bottomNavigation =
+`
+
+const links = [
+  {
+    icon: <Icon.Home />,
+    text: 'Home',
+    link: '/bottomnavigation/home'
+  },
+  {
+    icon: <Icon.MusicNote />,
+    text: 'Music',
+    link: '/bottomnavigation/music'
+  },
+  {
+    icon: <Icon.Photo />,
+    text: 'Photos',
+    link: '/bottomnavigation/photos'
+  }
+]
+
+const content = (title) => {
+  const arr = new Array(100).fill(title)
+  return (
+    <List>
+    {
+      arr.map((x, index) => {
+        return <Row key={index} primary={x + ' ' + index} />
+      })
+    }
+    </List>
+  )
+}
+
+const BasicExample = () => (
+  <HashRouter basename='/bottomnavigation'>
+    <div style={{height: '600px', width: '400px', margin: '0 auto', border: '10px solid #ececec'}}>
+      <Match pattern='/' render={({location}) => (
+        <BottomNavigation location={location} links={links}>
+          <Match exactly pattern='/bottomnavigation' render={() => (
+            <span>Please select a country from the tabs.</span>
+          )} />
+          <Match pattern='/bottomnavigation/home' component={() => content('Home')} />
+          <Match pattern='/bottomnavigation/music' component={() => content('music')} />
+          <Match pattern='/bottomnavigation/photos' component={() => content('photos')} />
+        </BottomNavigation>
+      )} />
+    </div>
+  </HashRouter>
+)
+
+const Home = () => (
+  <div>
+    <h2>Home</h2>
+  </div>
+)
+
+const About = () => (
+  <div>
+    <h2>About</h2>
+  </div>
+)
+
+const Topics = ({ pathname }) => (
+  <div>
+    <h2>Topics</h2>
+    <ul>
+      <li><Link to={pathname + '/rendering'}>Rendering with React</Link></li>
+      <li><Link to={pathname + '/components'}>Components</Link></li>
+      <li><Link to={pathname + '/props-v-state'}>Props v. State</Link></li>
+    </ul>
+
+    <Match pattern={pathname + '/:topicId'} component={Topic}/>
+    <Match pattern={pathname} exactly render={() => (
+      <h3>Please select a topic</h3>
+    )}/>
+  </div>
+)
+
+const Topic = ({ params }) => (
+  <div>
+    <h3>{params.topicId}</h3>
+  </div>
+)
+
+ReactDOM.render(<BasicExample />, mountNode)`
+
+export default class BottomNavigationRoute extends React.Component {
+
+  render () {
+    return (
+      <div className='BottomNavigationExamples'>
+        <section>
+          <h2>BottomNavigation</h2>
+          <Playground
+            codeText={bottomNavigation}
+            scope={{React, ReactDOM, HashRouter, Match, Link, BottomNavigation, Icon, List, Row}}
+            noRender={false}
+            collapsableCode
+          />
+        </section>
+        <section>
+          <h2>Specification</h2>
+          <a href='https://material.google.com/components/cards.html'>
+            https://material.google.com/components/cards.html
+          </a>
+        </section>
+      </div>
+    )
+  }
+
+}