The navigation now moves to the top on scroll

src/common/components/Navigation/Navigation.jsx

@@ -2,6 +2,7 @@ import "./styles.sass";
 import Button from "@/common/components/Button";
 import SheepstarSitting from "@/assets/SheepstarSitting.png";
 import {Link, NavLink} from "react-router-dom";
+import {useEffect, useState} from "react";
 
 const links = [
     {name: "Home", to: "/"},
@@ -12,8 +13,22 @@ const links = [
 ];
 
 const Navigation = () => {
+    const [hide, setHidden] = useState(false);
+    const [lastScrollY, setLastScrollY] = useState(0);
+
+    const scrollHandler = () => {
+        setHidden(window.scrollY > lastScrollY);
+        setLastScrollY(window.scrollY);
+    }
+
+    useEffect(() => {
+        window.addEventListener('scroll', scrollHandler);
+
+        return () => window.removeEventListener('scroll', scrollHandler);
+    }, [lastScrollY]);
+
     return (
-        <header className="header">
+        <header className={`header${hide ? ' hidden' : ''}`}>
             <div className="link-area">
                 <Link to={"/"}><img className="logo" src={SheepstarSitting} alt="Sheepstar Logo"/></Link>