header is rendered when user starts scrolling up

Signed-off-by: Amelia-Maria Breda <ambreda@cisco.com>
project-zot · Oct 28, 2022 · 26783e6 · 26783e6
1 parent 146f764
commit 26783e6
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,7 @@
 .App {
   text-align: center;
   height: 100vh;
+  margin-top: 10vh;
 }
 
 .App-logo {

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -115,7 +115,6 @@ function setNavShow() {
 
 function Header() {
   const show = setNavShow();
-  console.log(show);
   const classes = useStyles();
   const path = useLocation().pathname;
   // const navigate = useNavigate();
@@ -137,7 +136,7 @@ function Header() {
     setOpen(false);
   };
   return (
-    <AppBar position="sticky">
+    <AppBar position={show ? 'fixed' : 'absolute'} sx={{ height: '10vh' }}>
       <Toolbar className={classes.header}>
         <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ minWidth: '60%' }}>
           <Grid container className={classes.grid}>