diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
index 2d06a203..ef947697 100644
--- a/apps/site/src/app/layout.tsx
+++ b/apps/site/src/app/layout.tsx
@@ -30,7 +30,7 @@ export default function RootLayout({
return (
- {/* */}
+
{children}
diff --git a/apps/site/src/assets/icons/zothacks-logo.png b/apps/site/src/assets/icons/zothacks-logo.png
index b0ba7241..ce74467c 100644
Binary files a/apps/site/src/assets/icons/zothacks-logo.png and b/apps/site/src/assets/icons/zothacks-logo.png differ
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
index 569e9ea1..72c9890e 100644
--- 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
index a0b595d4..fd3643a1 100644
--- 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 (
-
-
+
+
-
+
+
+
+
+
-
-
-
-
-
-