Added Navbar (#185)

* edited navbar font and appearance * added logo to hamburger menu, adjusted layout, changed button colour to white, gave hamburger menu an opaque background that goes over rest of site when opened * changed to zothacks logo and made hamburger menu more distinct * edited navbar font and appearance * added logo to hamburger menu, adjusted layout, changed button colour to white, gave hamburger menu an opaque background that goes over rest of site when opened * changed to zothacks logo and made hamburger menu more distinct * commented out incident form and devpost for now * ran prettier on files * changed index so navbar is always the first layer * made the css follow mobile first design approach * changed zothacks logo to be child of navbar.brand * ran prettier * added hover animation * changed navbar background to be same color as ocean and changed hover animation * changed navbar background so it only appears when it scrolls to the ocean * made blue background appear at different places depending on screen width * prettier * made background turn grey when scrolled, changed hover animation to white glow * renamed zothacks logo png * changed logo name in import
HackAtUCI · Nov 1, 2024 · 512f656 · 512f656
1 parent 5f8f50e
commit 512f656
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 67 deletions.
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -30,7 +30,7 @@ export default function RootLayout({
 	return (
 		<html lang="en" className={fredoka.variable}>
 			<body className="background">
-				{/* <NavBar /> */}
+				<NavBar />
 				<main>{children}</main>
 				<Footer />
 			</body>

diff --git a/apps/site/src/assets/icons/zothacks-logo.png b/apps/site/src/assets/icons/zothacks-logo.png
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -3,73 +3,69 @@
 
 .nav {
 	width: 100%;
-	filter: drop-shadow(0px 2.5px 2px rgba(0, 0, 0, 0.4));
-
-	@include utils.media-breakpoint-up(sm) {
-		position: sticky;
-		z-index: 101;
-		top: 0;
+	z-index: 101;
+	background-color: rgba(20, 20, 20, 0.7);
+	mix-blend-mode: hard-light;
+	@include utils.media-breakpoint-up(lg) {
+		backdrop-filter: none;
 	}
+	backdrop-filter: blur(7px);
+	position: fixed;
+	text-align: right;
+	transition: background-color 0.2s ease;
 }
 
 .navbar {
-	background-image: url("~@/assets/images/lined_paper.svg");
-	background-size: cover;
-	background-position: left bottom;
-	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
 }
 
 .logo {
-	position: absolute;
-	left: 30px;
-	width: 20vw;
-	height: 20vw;
-	text-align: center;
-	transform: rotate(-16.81deg) translateY(-5vw);
+	position: relative;
+	width: 40px;
+	height: 40px;
+	align-items: left;
+	text-align: left;
+	top: 0;
 }
 
 .text {
 	margin-left: 1vw;
 	margin-right: 1vw;
-	font-size: 2rem;
-	font-weight: bold;
+	font-size: 1.5rem;
+	font-weight: 600;
 	text-decoration: none;
-}
+	line-height: 7vh;
 
-.notActive {
-	@extend .text;
-	color: black;
-}
+	@include utils.media-breakpoint-up(lg) {
+		font-size: 1rem;
+		margin-top: 0;
+		transform: translateY(-4px);
+	}
 
-.homeActive {
-	@extend .text;
-	color: theme.$green;
+	&:hover {
+		text-shadow: 0 0 5px white;
+	}
 }
 
-.resourcesActive {
+.notActive {
 	@extend .text;
-	color: theme.$blue;
+	color: white;
 }
 
-.scheduleActive {
+.active {
 	@extend .text;
-	color: theme.$navbar-red;
+	color: white;
+	text-decoration: underline;
+	text-underline-offset: 0.3rem;
+	text-decoration-thickness: 0.14rem;
 }
 
-@include utils.media-breakpoint-down(md) {
-	.logo {
-		left: 3vw;
-		transform: rotate(-16.81deg) translateY(-6vw);
-	}
-	.text {
-		font-size: 1.5rem;
-	}
+.bg-transparent {
+	background-color: transparent;
 }
 
-@include utils.media-breakpoint-up(lg) {
-	.logo {
-		width: 180px;
-		height: 180px;
-		transform: rotate(-16.81deg) translateY(-40px);
-	}
+.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
@@ -1,5 +1,7 @@
 "use client";
 
+import { useState, useEffect } from "react";
+
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
@@ -15,65 +17,75 @@ import styles from "./NavBar.module.scss";
 export default function NavBar() {
 	const activeRoute = usePathname();
 
+	const [hasScrolled, setHasScrolled] = useState(false);
+
+	useEffect(() => {
+		const handleScroll = () =>
+			window.scrollY !== 0 ? setHasScrolled(true) : setHasScrolled(false);
+
+		window.addEventListener("scroll", handleScroll);
+
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
+
 	return (
-		<div className={styles.nav}>
-			<Navbar expand="lg" className={`bg-body-tertiary ${styles.navbar}`}>
+		<div
+			className={`${styles.nav} fixed-top ${hasScrolled ? "bg-scrolled" : "bg-transparent"}`}
+		>
+			<Navbar variant="dark" expand="lg" className={`${styles.navbar}`}>
 				<Container fluid>
-					<Navbar.Brand />
+					<Navbar.Brand href="/" as={Link}>
+						<div className={styles.logo}>
+							<Image src={ZotHacksLogo.src} alt="Hacks Logo" fill />
+						</div>
+					</Navbar.Brand>
 					<Navbar.Toggle aria-controls="basic-navbar-nav" />
 					<Navbar.Collapse id="basic-navbar-nav">
-						<Nav className="ms-auto text-center">
+						<Nav className="ms-auto text">
 							<Link
 								href="/"
 								className={
-									activeRoute === "/" ? styles.homeActive : styles.notActive
+									activeRoute === "/" ? styles.active : styles.notActive
 								}
 							>
-								Home
+								HOME
 							</Link>
 							<Link
 								href="/resources"
 								className={
 									activeRoute === "/resources"
-										? styles.resourcesActive
+										? styles.active
 										: styles.notActive
 								}
 							>
-								Resources
+								RESOURCES
 							</Link>
 							<Link
 								href="/schedule"
 								className={
-									activeRoute === "/schedule"
-										? styles.scheduleActive
-										: styles.notActive
+									activeRoute === "/schedule" ? styles.active : styles.notActive
 								}
 							>
-								Schedule
+								SCHEDULE
 							</Link>
-							<Link
-								href="https://forms.gle/6GUGYnVoFhAAxVkL8"
+							{/* <Link
+								href="https://forms.gle/cCixQqKR2gDXAUMLA"
 								className={styles.notActive}
 								target="_blank"
 							>
-								Incident Form
+								INCIDENT FORM
 							</Link>
 							<Link
 								href="https://zothacks-2023.devpost.com/"
 								className={styles.notActive}
 								target="_blank"
 							>
-								Devpost
-							</Link>
+								DEVPOST
+							</Link>	 */}
 						</Nav>
 					</Navbar.Collapse>
 				</Container>
 			</Navbar>
-			<Link href="/">
-				<div className={styles.logo}>
-					<Image src={ZotHacksLogo.src} alt="ZotHacks Logo" fill />
-				</div>
-			</Link>
 		</div>
 	);
 }