Move logic to Scrollable component

app/components/Scrollable/Scrollable.js

@@ -1,12 +1,39 @@
 // @flow
+import * as React from 'react';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
 import styled from 'styled-components';
 
-const Scrollable = styled.div`
+type Props = {
+  shadow?: boolean,
+};
+
+@observer
+class Scrollable extends React.Component<Props> {
+  @observable shadow: boolean = false;
+
+  handleScroll = (ev: SyntheticMouseEvent<*>) => {
+    this.shadow = !!(this.props.shadow && ev.currentTarget.scrollTop > 0);
+  };
+
+  render() {
+    const { shadow, ...rest } = this.props;
+
+    return (
+      <Wrapper onScroll={this.handleScroll} shadow={this.shadow} {...rest} />
+    );
+  }
+}
+
+const Wrapper = styled.div`
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: none;
   -webkit-overflow-scrolling: touch;
+  box-shadow: ${props =>
+    props.shadow ? '0 1px inset rgba(0,0,0,.1)' : 'none'};
+  transition: all 250ms ease-in-out;
 `;
 
 export default Scrollable;

app/components/Sidebar/Main.js

@@ -52,7 +52,7 @@ class MainSidebar extends React.Component<Props> {
           }
         />
         <Flex auto column>
-          <Scrollable>
+          <Scrollable shadow>
             <Section>
               <SidebarLink to="/dashboard" icon={<HomeIcon />}>
                 Home

app/components/Sidebar/Settings.js

@@ -36,7 +36,7 @@ class SettingsSidebar extends React.Component<Props> {
         />
 
         <Flex auto column>
-          <Scrollable>
+          <Scrollable shadow>
             <Section>
               <Header>Account</Header>
               <SidebarLink to="/settings" icon={<ProfileIcon />}>