fix: logo moves upon navbar expansion and navbar is fixed to top of t…

…he screen
HackAtUCI · Sep 7, 2023 · b2f5113 · b2f5113
1 parent f2655d0
commit b2f5113
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 94 deletions.
diff --git a/apps/site/src/assets/icons/zothacks-logo.svg b/apps/site/src/assets/icons/zothacks-logo.svg
diff --git a/apps/site/src/assets/images/lined_paper.svg b/apps/site/src/assets/images/lined_paper.svg
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -1,19 +1,25 @@
 @use "@/lib/styles/variables.scss" as variables;
 
 .nav {
+	position: fixed;
+	width: 100%;
+}
+
+.navbar {
 	background-image: url("~@/assets/images/lined_paper.svg");
 	background-size: cover;
-	background-position: left top;
+	background-position: left bottom;
 	background-repeat: no-repeat;
+	filter: drop-shadow(0px 2.5px 2px rgba(0, 0, 0, 0.4));
 }
 
 .logo {
 	position: absolute;
-	left: 0px;
-	top: 0px;
+	left: 30px;
 	width: 20vw;
 	height: 20vw;
 	text-align: center;
+	transform: rotate(-16.81deg) translateY(-5vw);
 }
 
 .homeNotActive,
@@ -58,13 +64,9 @@
 }
 
 @include variables.media-breakpoint-down(md) {
-	.nav {
-		background-size: auto 64px;
-		background-repeat: repeat;
-	}
 	.logo {
-		left: 1.8vw;
-		top: 1.8vw;
+		left: 3vw;
+		transform: rotate(-16.81deg) translateY(-6vw);
 	}
 	.homeNotActive,
 	.resourcesNotActive,
@@ -75,3 +77,11 @@
 		font-size: 1.5rem;
 	}
 }
+
+@include variables.media-breakpoint-up(lg) {
+	.logo {
+		width: 180px;
+		height: 180px;
+		transform: rotate(-16.81deg) translateY(-50px);
+	}
+}
diff --git a/apps/site/src/components/NavBar/NavBar.tsx b/apps/site/src/components/NavBar/NavBar.tsx
@@ -16,56 +16,50 @@ export default function NavBar() {
 	const activeRoute = usePathname();
 
 	return (
-		<Navbar expand="md" className={`bg-body-tertiary ${styles.nav}`}>
-			<Container fluid>
-				<Navbar.Brand>
-					<Link href="/">
-						<div className={styles.logo}>
-							<Image
-								src={ZotHacksLogo.src}
-								alt="ZotHacks Logo"
-								// width="300"
-								// height="300"
-								fill
-								// className={"img-fluid"}
-							/>
-						</div>
-					</Link>
-				</Navbar.Brand>
-				<Navbar.Toggle aria-controls="basic-navbar-nav" />
-				<Navbar.Collapse id="basic-navbar-nav">
-					<Nav className="ms-auto text-center">
-						<Link
-							href="/"
-							className={
-								activeRoute === "/" ? styles.homeActive : styles.homeNotActive
-							}
-						>
-							Home
-						</Link>
-						<Link
-							href="/resources"
-							className={
-								activeRoute === "/resources"
-									? styles.resourcesActive
-									: styles.resourcesNotActive
-							}
-						>
-							Resources
-						</Link>
-						<Link
-							href="/schedule"
-							className={
-								activeRoute === "/schedule"
-									? styles.scheduleActive
-									: styles.scheduleNotActive
-							}
-						>
-							Schedule
-						</Link>
-					</Nav>
-				</Navbar.Collapse>
-			</Container>
-		</Navbar>
+		<nav className={styles.nav}>
+			<Navbar expand="md" className={`bg-body-tertiary ${styles.navbar}`}>
+				<Container fluid>
+					<Navbar.Brand />
+					<Navbar.Toggle aria-controls="basic-navbar-nav" />
+					<Navbar.Collapse id="basic-navbar-nav">
+						<Nav className="ms-auto text-center">
+							<Link
+								href="/"
+								className={
+									activeRoute === "/" ? styles.homeActive : styles.homeNotActive
+								}
+							>
+								Home
+							</Link>
+							<Link
+								href="/resources"
+								className={
+									activeRoute === "/resources"
+										? styles.resourcesActive
+										: styles.resourcesNotActive
+								}
+							>
+								Resources
+							</Link>
+							<Link
+								href="/schedule"
+								className={
+									activeRoute === "/schedule"
+										? styles.scheduleActive
+										: styles.scheduleNotActive
+								}
+							>
+								Schedule
+							</Link>
+						</Nav>
+					</Navbar.Collapse>
+				</Container>
+			</Navbar>
+			<Link href="/">
+				<div className={styles.logo}>
+					<Image src={ZotHacksLogo.src} alt="ZotHacks Logo" fill />
+				</div>
+			</Link>
+		</nav>
 	);
 }