Optimize scrolling. Add navbar auto hide and show.

src/components/Home.tsx

@@ -7,7 +7,8 @@ import { MainFrameworkContext } from '@/pages/MainFramework.tsx'
 
 const Home: React.FC = () => {
     const {
-        controllers: { scrollY }
+        hideScrollbarRef,
+        navbarHiddenState: { navbarHidden, setNavbarHidden }
     } = useContext(MainFrameworkContext)
     const fitFullScreenRef = useRef<HTMLDivElement>(null)
 
@@ -33,9 +34,32 @@ const Home: React.FC = () => {
     }
 
     const handleScrollDown = () => {
-        scrollY(1000)
+        hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
     }
 
+    useEffect(() => {
+        const hideScrollbarDOM = hideScrollbarRef.current
+        const scrollListener = () => {
+            if (
+                hideScrollbarDOM &&
+                fitFullScreenRef.current &&
+                hideScrollbarDOM.getY() < fitFullScreenRef.current?.offsetHeight
+            ) {
+                if (!navbarHidden) {
+                    setNavbarHidden(true)
+                }
+            } else {
+                if (navbarHidden) {
+                    setNavbarHidden(false)
+                }
+            }
+        }
+        hideScrollbarDOM?.addEventListener('scroll', scrollListener)
+        return () => {
+            hideScrollbarDOM?.removeEventListener('scroll', scrollListener)
+        }
+    }, [hideScrollbarRef, navbarHidden, setNavbarHidden])
+
     return (
         <>
             <FitFullScreen zIndex={100} backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
@@ -55,6 +79,7 @@ const Home: React.FC = () => {
                 </FitCenter>
             </FitFullScreen>
             <FitFullScreen />
+            <FitFullScreen />
         </>
     )
 }