fix navbar styling

src/components/Navbar/Navbar.jsx

@@ -108,6 +108,7 @@ const Navbar = () => {
 
   const swiperRef = useRef(null); // Create a ref for the Swiper instance
   const [showHeader, setShowHeader] = useState(true);
+  const [isAtTop, setIsAtTop] = useState(true);
   const [lastScrollPos, setLastScrollPos] = useState(0);
   const [language, setLanguage] = useState('English');
   const dispatch = useDispatch();
@@ -121,13 +122,24 @@ const Navbar = () => {
 
   const [displayCollection, setDisplayCollection] = useState({
     productType: null,
-    list:[]
+    list: []
   })
 
   useEffect(() => {
 
     dispatch(fetchProducts())
 
+    const handleScroll = () => {
+      setIsAtTop(window.scrollY < 20);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    // Cleanup on component unmount
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+
   }, [])
 
   useEffect(() => {
@@ -190,9 +202,9 @@ const Navbar = () => {
             position: "relative",
             cursor: "pointer"
           }}
-          onClick={()=>{
-            sessionStorage.setItem('amber-select-collection',title)
-            sessionStorage.setItem('amber-select-product-type',displayCollection.productType)
+          onClick={() => {
+            sessionStorage.setItem('amber-select-collection', title)
+            sessionStorage.setItem('amber-select-product-type', displayCollection.productType)
             window.location.href = `/products`;
           }}
         >
@@ -230,7 +242,7 @@ const Navbar = () => {
   const displayCollectionList = (collection, productType) => {
     setDisplayCollection({
       productType,
-      list:collection
+      list: collection
     })
   }
 
@@ -242,14 +254,16 @@ const Navbar = () => {
     <>
       <AppBar position="fixed"
         sx={{
-          backgroundColor: "rgba(255, 255, 255, 0.3)", // Transparent white background
-          backdropFilter: "blur(10px)", // Apply blur effect
+          backgroundColor: (isAtTop) ? "rgba(0, 0, 0, 0)" : "rgba(255, 255, 255, 0.3)",
+          backdropFilter: (isAtTop) ? "none" : "blur(10px)",
           boxShadow: 0,
-          borderBottom: '1px solid white',
           transition: "all 0.2s ease-in-out",
           ":hover": {
-            backgroundColor: "rgba(255,255,255,1)",
-            backdropFilter: "none"
+            backgroundColor: "rgba(255,255,255,1) !important",
+            backdropFilter: "none !important",
+            '& .navItem':{
+              color:"black !important"
+            }
           }
         }}
         onMouseLeave={() => {
@@ -343,9 +357,10 @@ const Navbar = () => {
               }}
             >
               <Typography variant="body2"
+                className="navItem"
                 sx={{
                   fontWeight: "400",
-                  color: "black",
+                  color: (isAtTop) ? "white" : "black",
                   transition: "all 0.3s ease-in-out",
                   ":hover": {
                     color: "#95AAC5"
@@ -385,12 +400,16 @@ const Navbar = () => {
               </LanguageSelect>
             </FormControl> */}
 
-            <IconButton color="inherit">
-              <SearchIcon/>
+            <IconButton>
+              <SearchIcon className="navItem" style={{
+                color: (isAtTop) ? "white" : "black",
+              }} />
             </IconButton>
 
             <Badge sx={{ cursor: "pointer" }} onClick={() => { window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
-              <LocalMallIcon color="action" />
+              <LocalMallIcon className="navItem" style={{
+                color: (isAtTop) ? "white" : "black",
+              }} />
             </Badge>
 
             {/* <IconButton color="inherit">