diff --git a/app/components/Scrollable/Scrollable.js b/app/components/Scrollable/Scrollable.js index ad88f438..46df2e6d 100644 --- a/app/components/Scrollable/Scrollable.js +++ b/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 { + @observable shadow: boolean = false; + + handleScroll = (ev: SyntheticMouseEvent<*>) => { + this.shadow = !!(this.props.shadow && ev.currentTarget.scrollTop > 0); + }; + + render() { + const { shadow, ...rest } = this.props; + + return ( + + ); + } +} + +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; diff --git a/app/components/Sidebar/Main.js b/app/components/Sidebar/Main.js index 649d508c..8c00488f 100644 --- a/app/components/Sidebar/Main.js +++ b/app/components/Sidebar/Main.js @@ -52,7 +52,7 @@ class MainSidebar extends React.Component { } /> - +
}> Home diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js index 18f70fd7..2022e52c 100644 --- a/app/components/Sidebar/Settings.js +++ b/app/components/Sidebar/Settings.js @@ -36,7 +36,7 @@ class SettingsSidebar extends React.Component { /> - +
Account
}>