From 26783e61e5b0fa9c345f569aeddf5b2b5c0fee16 Mon Sep 17 00:00:00 2001
From: Amelia-Maria Breda <ambreda@cisco.com>
Date: Fri, 28 Oct 2022 12:36:04 +0100
Subject: [PATCH] header is rendered when user starts scrolling up

Signed-off-by: Amelia-Maria Breda <ambreda@cisco.com>
---
 src/App.css               | 1 +
 src/components/Header.jsx | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index f77b8f9..77e1673 100644
--- 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
index df35f8b..f8bae5f 100644
--- 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}>