i am trying to hide the header when a user scrolls down and show it when they scroll up only on mobile but my code needs correction for it to work: Header.jsx: import Image from "next/image";
import Link from "next/link";

import Socials from "../components/Socials";

const Header = () => {
  return (
    <header className="absolute z-30 w-full items-center px-16 xl-px-0 xl:h-[90px]">
      <div className="container mx-auto">
        <div className="flex flex-col lg:flex-row justify-between items-center gap-y-6 py-8">
          {/* logo */}
          <Link href="/">
            <Image
              src="/logo.svg"
              alt="logo"
              width={220}
              height={48}
              priority
            />
          </Link>

          {/* socials */}
          <Socials />
        </div>
      </div>
    </header>
  );
};

export default Header;
Layout.jsx: import { Sora } from "next/font/google";
import Head from "next/head";
import Header from "../components/Header";
import Nav from "../components/Nav";
import TopLeftImg from "../components/TopLeftImg";

// setup font
const sora = Sora({
  subsets: ["latin"],
  variable: "--font-sora",
  weight: ["100", "200", "300", "400", "500", "600", "700", "800"],
});

const Layout = ({ children }) => {
  return (
    <main
      className={`page bg-site text-white bg-cover bg-no-repeat ${sora.variable} font-sora relative`}
    >
      {/* metadata */}
      <Head>
          <title>Vycta Lemill | Portfolio</title>
          <meta name="description" content="With a keen eye for design and a passion for code, I bring visions to life with precision and polish. Let's collaborate to create a stunning online presence that showcases your unique brand and leaves a lasting impression. Elevate your digital game with a developer who is committed to quality and innovation." />
          <meta property="og:title" content="Transforming your Ideas into Digital Reality" />
          <meta property="og:description" content="With a keen eye for design and a passion for code, I bring visions to life with precision and polish. Let's collaborate to create a stunning online presence that showcases your unique brand and leaves a lasting impression. Elevate your digital game with a developer who is committed to quality and innovation." />
          <meta property="og:type" content="website" />
          <meta property="og:image" content="/vyctalemill.png" />
          <meta property="og:url" content="https://vyctalemill.com" />
          <link rel="canonical" href="https://vyctalemill.com" />
          <meta name="keywords" content="web development, web design, AI training, AI services, front-end development, full-stack development, responsive design, user experience, UX design, UI design, artificial intelligence, machine learning, web app development, modern web design, web technologies, business website design, web development frameworks, visual design, interactive web design, chatbots, deep learning, graphic design, data science, creative AI tool, front-end frameworks, SEO optimization, web development tools, creative web design" />
          <meta name="author" content="Vycta Lemill" />
          <meta name="theme-color" content="#f13024" />
          <meta name="email" content="contact@vyctalemill.com" />
      </Head>


      <TopLeftImg />
      <Nav />
      <Header />

      {/* main content */}
      {children}
    </main>
  );
};

export default Layout;
_app.jsx: import { useEffect } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { useRouter } from "next/router";
import Layout from "../components/Layout";
import Transition from "../components/Transition";
import { GlobeProvider } from '../components/globe/globeContext';
import GoogleAnalytics from '../components/GoogleAnalytics';
import ReactGA from 'react-ga4';
const TRACKING_ID = "G-3BG013M6CV"; 


import "../styles/globals.css";


function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
        ReactGA.initialize(TRACKING_ID);
        // Send pageview with a custom path
    }, [])

  return (
    <GlobeProvider>
      <Layout>
        <AnimatePresence mode="wait">
          <motion.div key={router.route} className="h-full">
            <Transition />
            <GoogleAnalytics />
            <Component {...pageProps} />
          </motion.div>
        </AnimatePresence>
      </Layout>
    </GlobeProvider>
  );
}

export default MyApp;