made blue background appear at different places depending on screen width

Author: ofjuneskies

apps/site/src/components/NavBar/NavBar.module.scss

@@ -14,6 +14,7 @@
 	position: fixed;
 	text-align: right;
 	backdrop-filter: blur(7px);
+	transition: background-color 0.2s ease;
 }
 
 .navbar {
@@ -63,11 +64,9 @@
 }
 
 .bg-transparent {
-	background-color: transparent !important;
-	transition: background-color 0.3s ease;
-  }
+	background-color: transparent;
+}
 
 .bg-ocean {
-	background-color: rgba(1, 167, 197, 0.5) !important;
-	transition: background-color 0.3s ease;
-  }
+	background-color: rgba(1, 167, 197, 0.5);
+}

apps/site/src/components/NavBar/NavBar.tsx

@@ -20,10 +20,26 @@ export default function NavBar() {
 	const [hasScrolledToOcean, setHasScrolledToOcean] = useState(false);
 
 	useEffect(() => {
+		const getScrollThreshold = () => {
+			if (window.innerWidth < 768) {
+				// For mobile screens
+				return document.documentElement.scrollHeight / 5; 
+			} else if (window.innerWidth < 1200) {
+				// For tablets and small desktops
+				return document.documentElement.scrollHeight / 3.5;
+			} else {
+				// For large desktops
+				return document.documentElement.scrollHeight / 2.55;
+			}
+		};
+		
+		let scrollThreshold = getScrollThreshold();
 		const handleScroll = () => 
-			window.scrollY > document.documentElement.scrollHeight / 2.55 ? setHasScrolledToOcean(true) : setHasScrolledToOcean(false);
+			window.scrollY > scrollThreshold ? setHasScrolledToOcean(true) : setHasScrolledToOcean(false);
 
 		window.addEventListener("scroll", handleScroll);
+
+		return () => window.removeEventListener("scroll", handleScroll);
 		}, []);
 
 	return (