Show on scroll

components/OrganizedContent.module.css

@@ -109,9 +109,12 @@
 
 
 .burger {
-  position: absolute;
-  top: 5%;
-  left: 2rem;
+  position: fixed;
+  margin: 0px;
+  top: auto;
+  right: auto;
+  bottom: 20px;
+  left: 20px;
   display: none;
   flex-direction: column;
   justify-content: space-around;
@@ -123,6 +126,7 @@
   padding: 0;
   z-index: 10;
   background: var(--light-blue-2);
+  transition: bottom 0.6s;
 }
 
 .burger:focus {
@@ -206,4 +210,8 @@
     display: none;
   }
   
+}
+
+.hiddenBurger {
+  bottom: -50px;
 }

components/OrganizedContent.tsx

@@ -206,11 +206,37 @@ const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
 };
 
 const Burger = ({ open, setOpen }: MobileProps) => {
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // find current scroll position
+      const currentScrollPos = window.pageYOffset;
+
+      // set state based on location info (explained in more detail below)
+      setVisible(
+        (prevScrollPos > currentScrollPos &&
+          prevScrollPos - currentScrollPos > 70) ||
+          currentScrollPos < 10
+      );
+
+      // set state to new scroll position
+      setPrevScrollPos(currentScrollPos);
+    };
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [prevScrollPos, visible]);
+
   const line1 = open ? styles.burgerLineOpen1 : styles.burgerLineClosed1;
   const line2 = open ? styles.burgerLineOpen2 : styles.burgerLineClosed2;
-  const line3 = open ? styles.burgerLineOpen3 : styles.burgerLineClosed3;
+  const line3 = open ? styles.burgerLineOpen3 : styles.burgerLineClosed3; //BUG!!
   return (
-    <div className={styles.burger} onClick={() => setOpen(!open)}>
+    <div
+      className={styles.burger + " " + (visible ? "" : styles.hiddenBurger)}
+      onClick={() => setOpen(!open)}
+    >
       <div className={line1} />
       <div className={line2} />
       <div className={line3} />