adjust appbar based on scroll position

package.json

@@ -67,6 +67,7 @@
     "@material-ui/styles": "^4.3.3",
     "@nozbe/watermelondb": "^0.9.0",
     "@nozbe/with-observables": "^1.0.2",
+    "@rehooks/window-scroll-position": "^1.0.1",
     "@rehooks/window-size": "^1.0.2",
     "@svgr/webpack": "4.1.0",
     "@trailofbits/embark-contract-info": "^1.1.0",

src/components/MainCointainer.jsx

@@ -1,5 +1,6 @@
 import React,{ Suspense, lazy, useState, useEffect }  from 'react';
 import { Route, Link, Switch, withRouter } from 'react-router-dom'
+import useWindowScrollPosition from '@rehooks/window-scroll-position'
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import queryString from 'query-string'
@@ -62,8 +63,11 @@ const useStyles = makeStyles(theme => ({
       duration: theme.transitions.duration.enteringScreen,
     }),
   },
+  appBarTop: {
+    boxShadow: 'none'
+  },
   appBarBg: {
-    backgroundColor: '#fff'
+    backgroundColor: '#FAFAFA'
   },
   accountText: {
     color: '#939BA1'
@@ -150,6 +154,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca
   const [open, setOpen] = useState(false)
   const [queryParams, setQueryParams] = useState({})
   const [logs, setLogs] = useState([])
+  const position = useWindowScrollPosition()
 
   useEffect(() => {
     const queryParams = queryString.parse(search)
@@ -173,6 +178,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca
 
   const classes = useStyles()
   const isHome = pathname === "/"
+  const popoverPosition = position.y < 100
 
   return (
     <div className={classes.root}>
@@ -181,6 +187,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca
         position="fixed"
         className={classNames(classes.appBar, classes.appBarBg, {
           [classes.appBarShift]: open,
+          [classes.appBarTop]: popoverPosition
         })}
       >
         <Toolbar disableGutters={!open}>
@@ -197,7 +204,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca
               color={'#FFFFFF'} />}
             {!loading && <MenuIcon/>}
           </IconButton>}
-          {!isHome && <Typography variant="h6" noWrap>
+          {(!isHome || !popoverPosition) && <Typography variant="h6" noWrap>
             <Link to="/" className={classNames(classes.link, classes.menuText)}>Liquid Funding</Link>
           </Typography>}
           <Typography component={'span'} className={classNames(classes.connect, {[classes.connected]: !!account})} onClick={!account ? enableEthereum : console.log}>

yarn.lock

@@ -1302,6 +1302,13 @@
     hoist-non-react-statics "^3.3.0"
     rxjs "^6.4.0"
 
+"@rehooks/window-scroll-position@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@rehooks/window-scroll-position/-/window-scroll-position-1.0.1.tgz#3cb80f22cbf9cdbd2041b5236ae1fce8245b2f1c"
+  integrity sha512-+7uUcU2DBzXW4ygKTCqjCrtT4Nq0f+hNxQvAw69pXSBc7DbqmzfpxrYu27dT4tXrUKSQPFPpo5AdMv2oUJVM7g==
+  dependencies:
+    lodash.throttle "^4.1.1"
+
 "@rehooks/window-size@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@rehooks/window-size/-/window-size-1.0.2.tgz#24583dda021969e7b7166b923b055a47cca4e4b5"