F #3951: Add scroll trigger

src/fireedge/src/client/components/HOC/InternalLayout/index.js

@@ -25,13 +25,14 @@ import Header from 'client/components/Header'
 import Footer from 'client/components/Footer'
 import internalStyles from 'client/components/HOC/InternalLayout/styles'
 
-const InternalLayout = ({ endpoints, authRoute, label, children }) => {
+const InternalLayout = ({ authRoute, label, children }) => {
   const classes = internalStyles()
+  const scroll = React.useRef()
   const { isFixMenu } = useGeneral()
 
   return authRoute ? (
     <Box className={clsx(classes.root, { [classes.isDrawerFixed]: isFixMenu })}>
-      <Header title={label} />
+      <Header title={label} scrollableContainer={scroll?.current} />
       <Box component="main" className={classes.main}>
         <CSSTransition
           in
@@ -48,7 +49,7 @@ const InternalLayout = ({ endpoints, authRoute, label, children }) => {
           timeout={300}
           unmountOnExit
         >
-          <Container maxWidth={false} className={classes.scrollable}>
+          <Container ref={scroll} maxWidth={false} className={classes.scrollable}>
             {children}
           </Container>
         </CSSTransition>

src/fireedge/src/client/components/Header/index.js

@@ -22,7 +22,8 @@ import {
   Toolbar,
   Typography,
   IconButton,
-  useMediaQuery
+  useMediaQuery,
+  useScrollTrigger
 } from '@material-ui/core'
 import MenuIcon from '@material-ui/icons/Menu'
 
@@ -32,18 +33,25 @@ import Group from 'client/components/Header/Group'
 import Zone from 'client/components/Header/Zone'
 import headerStyles from 'client/components/Header/styles'
 
-const Header = ({ title }) => {
+const Header = ({ title, scrollableContainer }) => {
   const { isOneAdmin } = useAuth()
   const { isFixMenu, fixMenu } = useGeneral()
-  const classes = headerStyles()
   const isUpLg = useMediaQuery(theme => theme.breakpoints.up('lg'))
   const isMobile = useMediaQuery(theme => theme.breakpoints.only('xs'))
 
+  const isScroll = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 100,
+    target: scrollableContainer ?? undefined
+  })
+
+  const classes = headerStyles({ isScroll })
+
   const handleFixMenu = () => fixMenu(true)
 
   return useMemo(
     () => (
-      <AppBar position="absolute" data-cy="header" elevation={0}>
+      <AppBar className={classes.appbar} data-cy="header" elevation={1}>
         <Toolbar>
           {!isUpLg && (
             <IconButton onClick={handleFixMenu} edge="start" color="inherit">

src/fireedge/src/client/components/Header/styles.js

@@ -1,13 +1,24 @@
 import { makeStyles } from '@material-ui/core'
 
 export default makeStyles(theme => ({
+  appbar: {
+    position: 'absolute',
+    transition: theme.transitions.create('background-color'),
+    backgroundColor: ({ isScroll }) => isScroll
+      ? theme.palette.secondary.main
+      : theme.palette.primary.main
+  },
   title: {
     flexGrow: 1,
     display: 'inline-flex',
     color: theme.palette.primary.contrastText,
     '& span': { textTransform: 'capitalize' }
   },
-  app: { color: theme.palette.secondary.main },
+  app: {
+    color: ({ isScroll }) => isScroll
+      ? theme.palette.primary.main
+      : theme.palette.secondary.main
+  },
   /* POPOVER */
   backdrop: {
     [theme.breakpoints.only('xs')]: {
@@ -41,4 +52,5 @@ export default makeStyles(theme => ({
     fontSize: '1rem',
     margin: theme.spacing(0, 2)
   }
-}))
+}
+))