made background turn grey when scrolled, changed hover animation to w…

…hite glow
HackAtUCI · Nov 1, 2024 · 91bad0c · 91bad0c
1 parent e3aa513
commit 91bad0c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 23 deletions.
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -4,7 +4,8 @@
 .nav {
 	width: 100%;
 	z-index: 101;
-	background-color: rgba(1, 167, 197, 0.5);
+	background-color: rgba(20, 20, 20, 0.7);
+	mix-blend-mode: hard-light;
 	@include utils.media-breakpoint-up(lg) {
 		backdrop-filter: none;
 	}
@@ -43,7 +44,7 @@
 	}
 
 	&:hover {
-		text-shadow: -3px -3px 3px #363837;
+		text-shadow: 0 0 5px white;
 	}
 }
 
@@ -64,6 +65,7 @@
 	background-color: transparent;
 }
 
-.bg-ocean {
-	background-color: rgba(1, 167, 197, 0.5);
+.bg-scrolled {
+	background-color: rgba(20, 20, 20, 0.7);
+	mix-blend-mode: hard-light;
 }
diff --git a/apps/site/src/components/NavBar/NavBar.tsx b/apps/site/src/components/NavBar/NavBar.tsx
@@ -17,27 +17,11 @@ import styles from "./NavBar.module.scss";
 export default function NavBar() {
 	const activeRoute = usePathname();
 
-	const [hasScrolledToOcean, setHasScrolledToOcean] = useState(false);
+	const [hasScrolled, setHasScrolled] = useState(false);
 
 	useEffect(() => {
-		const getScrollThreshold = () => {
-			if (window.innerWidth < 768) {
-				// For mobile screens
-				return document.documentElement.scrollHeight / 7;
-			} else if (window.innerWidth < 1200) {
-				// For tablets and small desktops
-				return document.documentElement.scrollHeight / 4;
-			} else {
-				// For large desktops
-				return document.documentElement.scrollHeight / 2;
-			}
-		};
-
-		let scrollThreshold = getScrollThreshold();
 		const handleScroll = () =>
-			window.scrollY > scrollThreshold
-				? setHasScrolledToOcean(true)
-				: setHasScrolledToOcean(false);
+			window.scrollY !== 0 ? setHasScrolled(true) : setHasScrolled(false);
 
 		window.addEventListener("scroll", handleScroll);
 
@@ -46,7 +30,7 @@ export default function NavBar() {
 
 	return (
 		<div
-			className={`${styles.nav} fixed-top ${hasScrolledToOcean ? "bg-ocean" : "bg-transparent"}`}
+			className={`${styles.nav} fixed-top ${hasScrolled ? "bg-scrolled" : "bg-transparent"}`}
 		>
 			<Navbar variant="dark" expand="lg" className={`${styles.navbar}`}>
 				<Container fluid>