[Dashboard] Remove use-scroll-position

Author: kien-ngo

apps/dashboard/package.json

@@ -29,7 +29,6 @@
     "@emotion/styled": "11.13.0",
     "@hookform/resolvers": "^3.9.0",
     "@marsidev/react-turnstile": "^1.0.2",
-    "@n8tb1t/use-scroll-position": "^2.0.3",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",

apps/dashboard/src/components/product-pages/common/Topnav.tsx

@@ -1,43 +1,20 @@
-import { Box, Container, Flex, useBreakpointValue } from "@chakra-ui/react";
-import { useScrollPosition } from "@n8tb1t/use-scroll-position";
+import { Box, Container, Flex } from "@chakra-ui/react";
 import { Logo } from "components/logo";
-import { useState } from "react";
 import { TrackedLink } from "tw-components";
 import { DesktopMenu } from "./nav/DesktopMenu";
 import { MobileMenu } from "./nav/MobileMenu";
 
 export const HomepageTopNav: React.FC = () => {
-  const isMobile = useBreakpointValue({ base: true, md: false });
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  useScrollPosition(
-    ({ currPos }) => {
-      if (currPos.y < -5) {
-        setIsScrolled(true);
-      } else if (currPos.y >= -5) {
-        setIsScrolled(false);
-      }
-    },
-    [isMobile],
-    undefined,
-    false,
-    16,
-  );
-
   return (
     <Box
-      transition="all 50ms"
       position="sticky"
       top={0}
       left={0}
       w="100%"
-      willChange="backdrop-filter background-color"
       zIndex="overlay"
       as="header"
-      bgColor={isScrolled ? "rgba(0,0,0,0.8)" : "rgba(0,0,0,0)"}
-      backdropFilter={
-        isScrolled ? "saturate(180%) blur(20px)" : "saturate(100%) blur(0px)"
-      }
+      bgColor="rgba(0,0,0,0)"
+      backdropFilter="saturate(100%) blur(0px)"
     >
       <Container
         as={Flex}