feat (nav): make nav transparent in top

src/Components/Navbar/Navbar.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, } from "react";
+import { useCallback, useEffect, useRef, useState, } from "react";
 import { useAppDispatch, useAppSelector, useCurrentSection, useMediaQuery, useResizeListener } from "src/utils/hooks";
 import { setNavHeight } from "src/redux/features/ui.slice";
 import NavDesktop from "./NavDesktop";
@@ -7,6 +7,8 @@ import { FiArrowRight } from "react-icons/fi";
 import { BiRocket } from "react-icons/bi";
 import { Link } from "react-router-dom";
 import { PAGES_ROUTES } from "src/utils/routing";
+import { motion } from "framer-motion";
+import throttle from "lodash.throttle";
 
 
 export const navLinks = [];
@@ -16,9 +18,13 @@ export default function Navbar() {
 
   const dispatch = useAppDispatch();
   const theme = useAppSelector(state => state.ui.theme)
-
   const isLargeScreen = useMediaQuery(MEDIA_QUERIES.isLarge)
 
+  const [navTransparent, setNavTransparent] = useState(true);
+  const isNavTransparentRef = useRef(true);
+
+  isNavTransparentRef.current = navTransparent;
+
   const updateNavHeight = useCallback(() => {
     const nav = document.querySelector("nav");
     if (nav) {
@@ -28,11 +34,26 @@ export default function Navbar() {
         document.documentElement.style.setProperty('--navHeight', nav.clientHeight + 'px')
       }
     }
-  }, [dispatch])
+  }, [dispatch]);
+
+  const handleScroll = useCallback(() => {
+    const inTop = window.scrollY < 10;
+    if (inTop && !isNavTransparentRef.current) setNavTransparent(true);
+    if (!inTop && isNavTransparentRef.current) setNavTransparent(false);
+  }, [])
 
   useEffect(() => {
     updateNavHeight();
-  }, [updateNavHeight]);
+    handleScroll();
+
+    const throttledScrollHandler = throttle(handleScroll, 500)
+
+    document.addEventListener('scroll', throttledScrollHandler)
+
+    return () => {
+      document.removeEventListener('scroll', throttledScrollHandler);
+    }
+  }, [handleScroll, updateNavHeight]);
 
   useResizeListener(updateNavHeight)
 
@@ -52,13 +73,19 @@ export default function Navbar() {
 
 
 
+  const bgColor = theme === 'dark' ? "rgba(16 24 40,1)" : "rgba(255 255 255,1)";
+  const bgColorTrans = theme === 'dark' ? "rgba(16 24 40,0)" : "rgba(255 255 255,0)";
+
 
   return (
-    <div className={`
-    sticky top-0 left-0 w-full z-[2010] 
-    ${theme === 'dark' ? "bg-gray-900 text-white" : "bg-white text-gray-900"}
+    <motion.header
+      animate={navTransparent ? { background: bgColorTrans } : { background: bgColor, }}
+      className={`
+    fixed top-0 left-0 w-full z-[2010] block
+    ${theme === 'dark' ? "text-white" : "text-gray-900"}
     `}>
       <NavDesktop cta={CTA} />
-    </div>
+    </motion.header>
   );
 }
+

src/features/Projects/pages/ExplorePage/Header/Header.tsx

@@ -4,6 +4,7 @@ import ASSETS from 'src/assets'
 import Badge from 'src/Components/Badge/Badge'
 import { Category } from 'src/features/Projects/Components/Categories/Categories'
 import { useProjectsFilters } from '../filters-context'
+import { useAppSelector } from 'src/utils/hooks'
 
 type Props = {
     selectedCategry: Category | null
@@ -11,7 +12,7 @@ type Props = {
 
 export default function Header(props: Props) {
 
-
+    const navHeight = useAppSelector(s => s.ui.navHeight)
 
     const { filters, filtersEmpty, removeFilter } = useProjectsFilters();
 
@@ -35,7 +36,10 @@ export default function Header(props: Props) {
 
 
     return (
-        <div className='h-[280px] rounded-20 overflow-hidden relative text-center flex flex-col justify-center items-center gap-8'>
+        <div
+            className='min-h-[280px] py-64 md:py-[120px]  rounded-20 overflow-hidden relative text-center flex flex-col justify-center items-center gap-8'
+        >
+            <div style={{ height: navHeight + 'px' }}></div>
             <img src={ASSETS.CoverImage} alt="" className='absolute inset-0 opacity-100 w-full h-full object-cover object-bottom z-[-1]' />
             <div className="content-container">
                 <div className="flex flex-col justify-center items-center gap-8">
@@ -43,7 +47,7 @@ export default function Header(props: Props) {
                         className='text-primary-500 text-h1 font-medium'
                     >{title}</h1>
                     {subtitle &&
-                        <p className="text-gray-600 font-medium text-body1">{subtitle}</p>
+                        <p className="text-body2 text-gray-600 font-medium">{subtitle}</p>
                     }
                     {!filtersEmpty && <div className=" ">
                         <p className="text-gray-500 font-medium text-body4 mb-8 mt-8 text-center">filtered by</p>