Updated navbar styles (#48)

* Updated navbar styles * Removed navbar hiding on scroll * Some mobile nav view * Desktop nav * Some bugfixes --------- Co-authored-by: Anjali Jay Jain <[email protected]>
HackDavis · Feb 11, 2025 · a9ea4e9 · a9ea4e9
1 parent ca45180
commit a9ea4e9
Show file tree

Hide file tree

Showing 7 changed files with 351 additions and 78 deletions.
diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx
@@ -12,13 +12,18 @@ import BigWave from './_components/BigWave/BigWave';
 
 export default function Home() {
   return (
-    <div className={styles.container} id="home">
-      <HeroSection />
-      <SandCastle />
-      <BigWave />
+    <div className={styles.container}>
+      <div id="home">
+        <HeroSection />
+        <SandCastle />
+        <BigWave />
+      </div>
 
-      <div id="faq">
+      <div id="donate">
         <Underwater />
+      </div>
+
+      <div id="faq">
         <FAQ />
       </div>
 

diff --git a/app/(pages)/_components/Navbar/Exit.tsx b/app/(pages)/_components/Navbar/Exit.tsx
@@ -0,0 +1,36 @@
+interface ExitProps {
+  width?: string;
+  height?: string;
+}
+
+export default function Exit({ width = '100%', height = '100%' }: ExitProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <line
+        x1="2"
+        y1="21.0919"
+        x2="21.0919"
+        y2="1.99999"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <line
+        x1="1.5"
+        y1="-1.5"
+        x2="28.5"
+        y2="-1.5"
+        transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 21.2129 23.2132)"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/app/(pages)/_components/Navbar/Menu.tsx b/app/(pages)/_components/Navbar/Menu.tsx
@@ -0,0 +1,44 @@
+interface MenuProps {
+  width?: string;
+  height?: string;
+}
+
+export default function Menu({ width = '100%', height = '100%' }: MenuProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 30 23"
+      fill="none"
+    >
+      <line
+        x1="1.5"
+        y1="1.5"
+        x2="28.5"
+        y2="1.5"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <line
+        x1="1.5"
+        y1="11.5"
+        x2="28.5"
+        y2="11.5"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <line
+        x1="1.5"
+        y1="21.5"
+        x2="28.5"
+        y2="21.5"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss
@@ -1,58 +1,117 @@
+@import '@globals/styles/mixins.scss';
+
 .container {
     position: fixed;
-    top: -100%;
+    top: 0;
     width: 100%;
     height: 126px;
 
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
 
     transition: all 0.4s;
     z-index: 1000;
-
-    &.visible {
-        top: 0;
-    }
-
-    &.background {
-        background-color: black;
-    }
-}
-
-.left {
-    padding: 0 38px;
 }
 
-.right {
+.navigation {
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: space-between;
     gap: 43px;
     height: 100%;
+    width: 100%;
+    padding: 0 38px;
+
+    @include tablet {
+        flex-direction: column;
+        justify-content: center;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        padding: 0;
+        gap: 0;
+        background: rgba(74, 74, 74, 0.50);
+        backdrop-filter: blur(12.5px);
+        transform: translateX(-100%);
+        transition: transform 1s;
+
+        &.visible {
+            transform: translateX(0%);
+        }
+    }
 }
 
 .links {
     display: flex;
     flex-direction: row;
     gap: 48px;
+    border-radius: 40px;
+    border: 1px solid var(--border-white);
+    padding: 16px 48px;
 
     .link {
         color: var(--text-light);
         font-family: var(--font-metropolis);
         font-weight: 400;
-        border-top: solid 2px transparent;
-        border-bottom: solid 2px transparent;
+        font-size: 1.125rem;
+        letter-spacing: 0.36px;
+        line-height: 100%;
         scroll-behavior: smooth;
+        transition: transform 0.3s;
+
+        &:hover {
+            transform: translateY(-0.1rem);
+        }
 
-        &:hover, &.active {
-            border-bottom-color: var(--text-light);
+        &.active {
+            font-weight: 700;
+        }
+    }
+
+    @include tablet {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+        padding: 0;
+        border: none;
+        border-radius: 0;
+        background: none !important;
+        backdrop-filter: none;
+
+        .link {
+            font-weight: 400;
+            color: var(--text-light) !important;
+
+            &:hover {
+                transform: none;
+            }
+
+            &.active {
+                color: var(--text-light) !important;
+            }
         }
     }
 }
 
-.mlh_banner {
-    margin-right: 108px;
+.items {
     align-self: baseline;
-}
+
+    .mlh_banner {
+        margin-right: 108px;
+        align-self: baseline;
+    }
+
+    .menu {
+        display: none;
+    }
+
+    .exit {
+        display: none;
+    }
+}