added hide on scroll logic

src/layouts/main/components/header/Header.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { AppBar, Toolbar, CssBaseline } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import HideOnScroll from './hideOnScroll';
+import HideOnScroll from '../../../../common/hideOnScroll'
 import Navigation from './navigation';
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
-    position: 'relative',
+    position: 'fixed',
     zIndex: 1301,
   },
 }));
@@ -18,13 +18,13 @@ const Header = () => {
     <>
       <CssBaseline />
       <HideOnScroll>
-        <AppBar className={classes.appBar} position="static" elevation={0}>
+        <AppBar className={classes.appBar} elevation={0}>
           <Toolbar>
             <Navigation />
           </Toolbar>
         </AppBar>
       </HideOnScroll>
-      {/* <Toolbar /> */}
+      <Toolbar />
     </>
   );
 };

src/layouts/main/components/header/hideOnScroll/HideOnScroll.jsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { useScrollTrigger, Slide } from '@material-ui/core';
-
-
-const HideOnScroll = (props) => {
-  const { children, window } = props;
-  const trigger = useScrollTrigger({ target: window ? window() : undefined });
-
-  return (
-    <Slide appear={false} direction="down" in={!trigger}>
-      {children}
-    </Slide>
-  );
-};
-export default HideOnScroll;

src/layouts/main/components/header/hideOnScroll/index.js

@@ -1 +0,0 @@
-export { default } from './HideOnScroll.jsx';

src/layouts/white/components/header/Header.jsx

@@ -12,6 +12,7 @@ import {
 import DarkModeToogle from './darkModeToogle'
 import ArtTrackOutlinedIcon from '@material-ui/icons/ArtTrackOutlined';
 import { makeStyles } from '@material-ui/styles';
+import HideOnScroll from '../../../../common/hideOnScroll'
 
 
 const useStyles = makeStyles((theme) => ({
@@ -52,7 +53,8 @@ const Header = (props) => {
   return (
     <>
       <CssBaseline />
-      <AppBar className={classes.appBar} position="fixed" elevation={0}>
+      <HideOnScroll>
+      <AppBar className={classes.appBar} elevation={0}>
         <Toolbar>
           <Grid container justify="space-between">
             <Grid item>
@@ -88,6 +90,7 @@ const Header = (props) => {
           </Grid>
         </Toolbar>
       </AppBar>
+      </HideOnScroll>
       <Toolbar />
     </>
   );

src/layouts/white/components/header/hideOnScroll/HideOnScroll.jsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { useScrollTrigger, Slide } from '@material-ui/core';
-
-
-const HideOnScroll = (props) => {
-  const { children, window } = props;
-  const trigger = useScrollTrigger({ target: window ? window() : undefined });
-
-  return (
-    <Slide appear={false} direction="down" in={!trigger}>
-      {children}
-    </Slide>
-  );
-};
-export default HideOnScroll;

src/layouts/white/components/header/hideOnScroll/index.js

@@ -1 +0,0 @@
-export { default } from './HideOnScroll.jsx';