From 65ae2ed27b6c0ce7a10bf8345c457f8b9e97235d Mon Sep 17 00:00:00 2001 From: brandonw504 Date: Sat, 8 Feb 2025 21:16:58 -0800 Subject: [PATCH 1/7] Updated navbar styles --- app/(pages)/(index-page)/page.tsx | 4 +- .../_components/Navbar/Navbar.module.scss | 43 +++++++++++++++---- app/(pages)/_components/Navbar/Navbar.tsx | 28 +++++++----- app/(pages)/_globals/styles/globals.scss | 5 +++ 4 files changed, 60 insertions(+), 20 deletions(-) diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index eabb5b1..c01eb95 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -36,8 +36,8 @@ export default function Home() {
{/*

FAQ Section

*/} diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss index 833bbbf..8f4b95d 100644 --- a/app/(pages)/_components/Navbar/Navbar.module.scss +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -15,10 +15,6 @@ &.visible { top: 0; } - - &.background { - background-color: black; - } } .left { @@ -37,19 +33,50 @@ display: flex; flex-direction: row; gap: 48px; + border-radius: 40px; + border: 1px solid var(--border-white); + background: rgba(136, 136, 136, 0.50); + backdrop-filter: blur(2px); + 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.25rem); + } - &:hover, &.active { - border-bottom-color: var(--text-light); + &.active { + font-weight: 700; } } + + .home.active { + color: var(--text-dark); + } + + .about.active { + color: var(--text-yellow); + } + + .faq.active { + color: var(--text-green); + } +} + +.home_links { + background: rgba(255, 255, 255, 0.50); + + .link { + color: var(--text-medium); + } } .mlh_banner { diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index 3b7a209..a894ae0 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -17,6 +17,7 @@ interface NavLink { page: string; path: string; id: string; + color: string; } const links = [ @@ -25,24 +26,28 @@ const links = [ page: '/', path: '/', id: 'home', + color: '#005271', }, { body: 'ABOUT', - page: '/about-us', - path: '/about-us', - id: 'about-us', + page: '/', + path: '/?section=about', + id: 'about', + color: '#FFC53D', }, { body: 'FAQ', page: '/', path: '/?section=faq', id: 'faq', + color: '#AFD157', }, { body: 'SPONSORS', page: '/', path: '/?section=sponsors', id: 'sponsors', + color: '#FFF', }, ] as NavLink[]; @@ -53,7 +58,6 @@ export default function Navbar() { const section = searchParams.get('section'); const [activeSection, setActiveSection] = useState(section || 'home'); const [showNavbar, setShowNavbar] = useState(true); - const [showBackground, setShowBackground] = useState(false); const currScroll = useRef(0); @@ -94,10 +98,8 @@ export default function Navbar() { currScroll.current = scroll; if (scroll > NAVBAR_SHOW_THRESHOLD) { - setShowBackground(true); setShowNavbar(delta < 0); } else { - setShowBackground(false); setShowNavbar(true); } }; @@ -130,16 +132,22 @@ export default function Navbar() { return (
- + activeSection === link.id)?.color ?? '#005271'}`} + width="50px" + height="50px" + />
-
+
{links.map((link) => ( Date: Sat, 8 Feb 2025 21:48:15 -0800 Subject: [PATCH 2/7] Removed navbar hiding on scroll --- .../_components/Navbar/Navbar.module.scss | 6 +--- app/(pages)/_components/Navbar/Navbar.tsx | 28 ++----------------- 2 files changed, 4 insertions(+), 30 deletions(-) diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss index 8f4b95d..8fb55b0 100644 --- a/app/(pages)/_components/Navbar/Navbar.module.scss +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -1,6 +1,6 @@ .container { position: fixed; - top: -100%; + top: 0; width: 100%; height: 126px; @@ -11,10 +11,6 @@ transition: all 0.4s; z-index: 1000; - - &.visible { - top: 0; - } } .left { diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index a894ae0..2665e72 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -1,7 +1,7 @@ 'use client'; import { useRouter, useSearchParams, usePathname } from 'next/navigation'; -import { MouseEvent, useEffect, useState, useRef } from 'react'; +import { MouseEvent, useEffect, useState } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import Logo from './Logo'; @@ -10,8 +10,6 @@ import Banner from '/public/Navbar/mlh-banner-2025.svg'; import styles from './Navbar.module.scss'; -const NAVBAR_SHOW_THRESHOLD = 200; - interface NavLink { body: React.ReactNode; page: string; @@ -57,9 +55,6 @@ export default function Navbar() { const searchParams = useSearchParams(); const section = searchParams.get('section'); const [activeSection, setActiveSection] = useState(section || 'home'); - const [showNavbar, setShowNavbar] = useState(true); - - const currScroll = useRef(0); useEffect(() => { const updateActiveSection = () => { @@ -92,22 +87,7 @@ export default function Navbar() { ); }; - const updateNavbarVisibility = () => { - const scroll = window.scrollY; - const delta = scroll - currScroll.current; - currScroll.current = scroll; - - if (scroll > NAVBAR_SHOW_THRESHOLD) { - setShowNavbar(delta < 0); - } else { - setShowNavbar(true); - } - }; - - const handleScroll = () => { - updateActiveSection(); - updateNavbarVisibility(); - }; + const handleScroll = () => updateActiveSection(); window.addEventListener('scroll', handleScroll, { passive: true }); @@ -131,9 +111,7 @@ export default function Navbar() { }; return ( -
+
activeSection === link.id)?.color ?? '#005271'}`} From 1006b8550657ac2a985c20b723e3fd206631d740 Mon Sep 17 00:00:00 2001 From: brandonw504 Date: Sat, 8 Feb 2025 22:55:11 -0800 Subject: [PATCH 3/7] Some mobile nav view --- app/(pages)/_components/Navbar/Exit.tsx | 36 +++++++++ app/(pages)/_components/Navbar/Menu.tsx | 44 +++++++++++ .../_components/Navbar/Navbar.module.scss | 77 ++++++++++++++++--- app/(pages)/_components/Navbar/Navbar.tsx | 22 +++++- 4 files changed, 166 insertions(+), 13 deletions(-) create mode 100644 app/(pages)/_components/Navbar/Exit.tsx create mode 100644 app/(pages)/_components/Navbar/Menu.tsx diff --git a/app/(pages)/_components/Navbar/Exit.tsx b/app/(pages)/_components/Navbar/Exit.tsx new file mode 100644 index 0000000..f32df2c --- /dev/null +++ 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 ( + + + + + ); +} diff --git a/app/(pages)/_components/Navbar/Menu.tsx b/app/(pages)/_components/Navbar/Menu.tsx new file mode 100644 index 0000000..f2e4fd9 --- /dev/null +++ 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 ( + + + + + + ); +} diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss index 8fb55b0..8daba42 100644 --- a/app/(pages)/_components/Navbar/Navbar.module.scss +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -1,3 +1,5 @@ +@import '@globals/styles/mixins.scss'; + .container { position: fixed; top: 0; @@ -7,22 +9,37 @@ display: flex; flex-direction: row; align-items: center; - justify-content: space-between; transition: all 0.4s; z-index: 1000; } -.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; + background: rgba(74, 74, 74, 0.50); + backdrop-filter: blur(12.5px); + + // &.visible { + + // } + } } .links { @@ -65,6 +82,28 @@ .faq.active { color: var(--text-green); } + + @include tablet { + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + padding: 0; + border: none; + border-radius: 0; + background: none; + backdrop-filter: none; + + .link { + font-weight: 400; + color: var(--text-light); + + &.active { + color: var(--text-light); + } + } + } } .home_links { @@ -73,9 +112,29 @@ .link { color: var(--text-medium); } + + @include tablet { + background: none; + + .link { + color: var(--text-light) + } + } } -.mlh_banner { - margin-right: 108px; +.items { align-self: baseline; -} \ No newline at end of file + + .mlh_banner { + margin-right: 108px; + align-self: baseline; + } + + .menu { + display: none; + } + + .exit { + display: none; + } +} diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index 2665e72..202531e 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -5,6 +5,8 @@ import { MouseEvent, useEffect, useState } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import Logo from './Logo'; +import Menu from './Menu'; +import Exit from './Exit'; import Banner from '/public/Navbar/mlh-banner-2025.svg'; @@ -22,7 +24,7 @@ const links = [ { body: 'HOME', page: '/', - path: '/', + path: '/?section=home', id: 'home', color: '#005271', }, @@ -55,6 +57,7 @@ export default function Navbar() { const searchParams = useSearchParams(); const section = searchParams.get('section'); const [activeSection, setActiveSection] = useState(section || 'home'); + const [showNavbar, setShowNavbar] = useState(false); useEffect(() => { const updateActiveSection = () => { @@ -112,14 +115,14 @@ export default function Navbar() { return (
-
+
activeSection === link.id)?.color ?? '#005271'}`} width="50px" height="50px" /> -
-
@@ -134,9 +137,20 @@ export default function Navbar() { ))}
+
+
mlh 2025 banner
+ {showNavbar ? ( +
setShowNavbar(false)}> + +
+ ) : ( +
setShowNavbar(true)}> + +
+ )}
); From 1ed10eeb0b3968e121cf92c3757b9f8c79ca230c Mon Sep 17 00:00:00 2001 From: brandonw504 Date: Mon, 10 Feb 2025 00:27:53 -0800 Subject: [PATCH 4/7] Desktop nav --- app/(pages)/(index-page)/page.tsx | 34 +--- .../_components/Navbar/Navbar.module.scss | 25 +-- app/(pages)/_components/Navbar/Navbar.tsx | 161 +++++++++++++++--- app/(pages)/about-us/page.tsx | 19 ++- 4 files changed, 165 insertions(+), 74 deletions(-) diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index c01eb95..3b0b523 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -8,39 +8,17 @@ import Underwater from '../_components/Underwater/Underwater'; export default function Home() { return ( -
- {/* Intro Section */} - {/*

- Halo! Welcome to the HackDavis template repo :D -

-

- Halo! Welcome to the HackDavis template repo :D -

-

- Halo! Welcome to the HackDavis template repo :D -

-

- Halo! Welcome to the HackDavis template repo :D -

*/} - -
+
+
+
- {/* Sections for Testing */} -
-

About Section

+ -
- {/*

FAQ Section

*/} - +
diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss index 8daba42..65b499d 100644 --- a/app/(pages)/_components/Navbar/Navbar.module.scss +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -33,6 +33,7 @@ top: 0; left: 0; padding: 0; + gap: 0; background: rgba(74, 74, 74, 0.50); backdrop-filter: blur(12.5px); @@ -48,8 +49,6 @@ gap: 48px; border-radius: 40px; border: 1px solid var(--border-white); - background: rgba(136, 136, 136, 0.50); - backdrop-filter: blur(2px); padding: 16px 48px; .link { @@ -63,7 +62,7 @@ transition: transform 0.3s; &:hover { - transform: translateY(-0.25rem); + transform: translateY(-0.1rem); } &.active { @@ -99,6 +98,10 @@ font-weight: 400; color: var(--text-light); + &:hover { + transform: none; + } + &.active { color: var(--text-light); } @@ -106,22 +109,6 @@ } } -.home_links { - background: rgba(255, 255, 255, 0.50); - - .link { - color: var(--text-medium); - } - - @include tablet { - background: none; - - .link { - color: var(--text-light) - } - } -} - .items { align-self: baseline; diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index 202531e..ae491a7 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -20,21 +20,36 @@ interface NavLink { color: string; } +interface Section { + id: string; + page: string; + baseColor: string; + activeColor: string; + background: string; +} + const links = [ { body: 'HOME', page: '/', - path: '/?section=home', + path: '/', id: 'home', color: '#005271', }, { - body: 'ABOUT', + body: 'DONATE', page: '/', - path: '/?section=about', - id: 'about', + path: '/?section=donate', + id: 'donate', color: '#FFC53D', }, + { + body: 'ABOUT', + page: '/about-us', + path: '/about-us', + id: 'about', + color: '#005271', + }, { body: 'FAQ', page: '/', @@ -51,42 +66,114 @@ const links = [ }, ] as NavLink[]; +const sections = [ + { + id: 'home', + page: '/', + baseColor: '#1589BE', + activeColor: '#005271', + background: 'rgba(255, 255, 255, 0.50)', + }, + { + id: 'donate', + page: '/', + baseColor: '#FFFFFF', + activeColor: '#FFC53D', + background: 'rgba(136, 136, 136, 0.50)', + }, + { + id: 'faq', + page: '/', + baseColor: '#FFFFFF', + activeColor: '#AFD157', + background: 'rgba(136, 136, 136, 0.50)', + }, + { + id: 'sponsors', + page: '/', + baseColor: '#FFFFFF', + activeColor: '#FFFFFF', + background: 'rgba(136, 136, 136, 0.50)', + }, + { + id: 'about', + page: '/about-us', + baseColor: '#1589BE', + activeColor: '#005271', + background: 'rgba(255, 255, 255, 0.50)', + }, + { + id: 'values', + page: '/about-us', + baseColor: '#FFFFFF', + activeColor: '#005271', + background: 'rgba(136, 136, 136, 0.50)', + }, + { + id: 'team', + page: '/about-us', + baseColor: '#FFFFFF', + activeColor: '#005271', + background: 'rgba(136, 136, 136, 0.50)', + }, + { + id: 'recap', + page: '/about-us', + baseColor: '#FFFFFF', + activeColor: '#005271', + background: 'rgba(136, 136, 136, 0.50)', + }, +] as Section[]; + export default function Navbar() { const pathname = usePathname(); const router = useRouter(); const searchParams = useSearchParams(); const section = searchParams.get('section'); - const [activeSection, setActiveSection] = useState(section || 'home'); + const [activeLink, setActiveLink] = useState( + section || (pathname === '/' ? 'home' : 'about') + ); + const [activeSection, setActiveSection] = useState( + section || (pathname === '/' ? 'home' : 'about') + ); const [showNavbar, setShowNavbar] = useState(false); useEffect(() => { const updateActiveSection = () => { - const currScroll = window.scrollY + window.innerHeight * 0.3; - const pageLinks = links.filter((link) => link.page === pathname); - const sections = pageLinks - .map((link) => { - const sectionContainer = document.getElementById(link.id); + const currScroll = window.scrollY + window.innerHeight * 0.2; + const pageSections = sections + .filter((section) => section.page === pathname) + .map((section) => { + const sectionContainer = document.getElementById(section.id); if (!sectionContainer) { return { id: '', sectionStart: 0, sectionEnd: 0 }; } const { offsetTop, offsetHeight } = sectionContainer; return { - id: link.id, + id: section.id, sectionStart: offsetTop, sectionEnd: offsetTop + offsetHeight, }; }) .sort((a, b) => a.sectionStart - b.sectionStart); - let i = sections.length - 1; + let i = pageSections.length - 1; for (i; i >= 0; i--) { - if (currScroll >= sections[i].sectionStart) { + if (currScroll >= pageSections[i].sectionStart) { break; } } + if (pathname === '/about-us') { + setActiveLink('about'); + } else { + setActiveLink( + currScroll > pageSections[i].sectionEnd ? '' : pageSections[i].id + ); + } + setActiveSection( - currScroll > sections[i].sectionEnd ? '' : sections[i].id + currScroll > pageSections[i].sectionEnd ? '' : pageSections[i].id ); }; @@ -94,17 +181,20 @@ export default function Navbar() { window.addEventListener('scroll', handleScroll, { passive: true }); + updateActiveSection(); + return () => { window.removeEventListener('scroll', handleScroll); }; }, [pathname]); useEffect(() => { - const sectionContainer = document.getElementById(section as string); + const currentSection = section || (pathname === '/' ? 'home' : 'about'); + const sectionContainer = document.getElementById(currentSection as string); if (sectionContainer) { sectionContainer.scrollIntoView({ behavior: 'smooth' }); } - }, [section]); + }, [section, pathname]); const getClickHandler = (path: string) => { return (e: MouseEvent) => { @@ -113,22 +203,47 @@ export default function Navbar() { }; }; + const getLogoColor = () => { + if (window.innerWidth <= 1048) return '#FFFFFF'; + + const currentSection = sections.find( + (section) => activeSection === section.id + ); + if (!currentSection) return '#005271'; + + return currentSection.activeColor; + }; + + const getLinkColor = (link: NavLink) => { + const currentSection = sections.find( + (section) => activeSection === section.id + ); + if (!currentSection) return 'var(--text-medium)'; + + if (activeLink === link.id) return currentSection.activeColor; + return currentSection.baseColor; + }; + return (
- activeSection === link.id)?.color ?? '#005271'}`} - width="50px" - height="50px" - /> +
activeSection === section.id) + ?.background ?? 'var(--text-light)', + }} > {links.map((link) => ( - - - - +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
); } From 98b910911a84b83449e5cf1269d94b2f3a54fc04 Mon Sep 17 00:00:00 2001 From: brandonw504 Date: Mon, 10 Feb 2025 17:45:52 -0800 Subject: [PATCH 5/7] Some bugfixes --- .../_components/Navbar/Navbar.module.scss | 26 ++++++------------- app/(pages)/_components/Navbar/Navbar.tsx | 2 -- 2 files changed, 8 insertions(+), 20 deletions(-) diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss index 65b499d..7fd10c4 100644 --- a/app/(pages)/_components/Navbar/Navbar.module.scss +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -36,10 +36,12 @@ gap: 0; background: rgba(74, 74, 74, 0.50); backdrop-filter: blur(12.5px); + transform: translateX(-100%); + transition: transform 1s; - // &.visible { - - // } + &.visible { + transform: translateX(0%); + } } } @@ -70,18 +72,6 @@ } } - .home.active { - color: var(--text-dark); - } - - .about.active { - color: var(--text-yellow); - } - - .faq.active { - color: var(--text-green); - } - @include tablet { flex-direction: column; align-items: center; @@ -91,19 +81,19 @@ padding: 0; border: none; border-radius: 0; - background: none; + background: none !important; backdrop-filter: none; .link { font-weight: 400; - color: var(--text-light); + color: var(--text-light) !important; &:hover { transform: none; } &.active { - color: var(--text-light); + color: var(--text-light) !important; } } } diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index ae491a7..a75cd34 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -204,8 +204,6 @@ export default function Navbar() { }; const getLogoColor = () => { - if (window.innerWidth <= 1048) return '#FFFFFF'; - const currentSection = sections.find( (section) => activeSection === section.id ); From bf2c7f794d336cf67aacce70f81467cddc2c2812 Mon Sep 17 00:00:00 2001 From: brandonw504 Date: Mon, 10 Feb 2025 22:54:30 -0800 Subject: [PATCH 6/7] Mobile nav --- app/(pages)/_components/Navbar/Exit.tsx | 36 --------- app/(pages)/_components/Navbar/Logo.tsx | 26 ++----- app/(pages)/_components/Navbar/Menu.tsx | 44 ----------- .../_components/Navbar/Navbar.module.scss | 73 ++++++++++++++++--- app/(pages)/_components/Navbar/Navbar.tsx | 51 ++++++++----- 5 files changed, 98 insertions(+), 132 deletions(-) delete mode 100644 app/(pages)/_components/Navbar/Exit.tsx delete mode 100644 app/(pages)/_components/Navbar/Menu.tsx diff --git a/app/(pages)/_components/Navbar/Exit.tsx b/app/(pages)/_components/Navbar/Exit.tsx deleted file mode 100644 index f32df2c..0000000 --- a/app/(pages)/_components/Navbar/Exit.tsx +++ /dev/null @@ -1,36 +0,0 @@ -interface ExitProps { - width?: string; - height?: string; -} - -export default function Exit({ width = '100%', height = '100%' }: ExitProps) { - return ( - - - - - ); -} diff --git a/app/(pages)/_components/Navbar/Logo.tsx b/app/(pages)/_components/Navbar/Logo.tsx index e6fea6f..6576718 100644 --- a/app/(pages)/_components/Navbar/Logo.tsx +++ b/app/(pages)/_components/Navbar/Logo.tsx @@ -1,34 +1,20 @@ interface LogoProps { - fill?: string; width?: string; height?: string; } -export default function Logo({ - fill = '#005271', - width = '100%', - height = '100%', -}: LogoProps) { +export default function Logo({ width = '100%', height = '100%' }: LogoProps) { return ( - - - - + + + + ); } diff --git a/app/(pages)/_components/Navbar/Menu.tsx b/app/(pages)/_components/Navbar/Menu.tsx deleted file mode 100644 index f2e4fd9..0000000 --- a/app/(pages)/_components/Navbar/Menu.tsx +++ /dev/null @@ -1,44 +0,0 @@ -interface MenuProps { - width?: string; - height?: string; -} - -export default function Menu({ width = '100%', height = '100%' }: MenuProps) { - return ( - - - - - - ); -} diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss index 7fd10c4..f9d7e6b 100644 --- a/app/(pages)/_components/Navbar/Navbar.module.scss +++ b/app/(pages)/_components/Navbar/Navbar.module.scss @@ -26,7 +26,6 @@ @include tablet { flex-direction: column; - justify-content: center; position: fixed; width: 100vw; height: 100vh; @@ -36,21 +35,29 @@ gap: 0; background: rgba(74, 74, 74, 0.50); backdrop-filter: blur(12.5px); - transform: translateX(-100%); - transition: transform 1s; + transform: translateY(-100%); + transition: transform 0.4s; &.visible { - transform: translateX(0%); + transform: translateY(0%); } } } +.logo { + @include tablet { + margin-top: 20%; + color: var(--text-light) !important; + } +} + .links { display: flex; flex-direction: row; gap: 48px; border-radius: 40px; border: 1px solid var(--border-white); + backdrop-filter: blur(2px); padding: 16px 48px; .link { @@ -75,10 +82,10 @@ @include tablet { flex-direction: column; align-items: center; - justify-content: center; height: 100%; width: 100%; padding: 0; + margin-top: 10%; border: none; border-radius: 0; background: none !important; @@ -107,11 +114,53 @@ align-self: baseline; } - .menu { - display: none; - } - - .exit { - display: none; + @include tablet { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + + .mlh_banner { + margin: 0px 32px; + } + + .hamburger { + margin: 32px 32px; + transition: all 0.3s ease-in-out; + + &_line { + width: 30px; + height: 3px; + margin: 5px auto; + display: block; + transition: all 0.3s ease-in-out; + } + + &:hover { + cursor: pointer; + } + + &_active { + margin: 32px 32px; + animation: smallbig 0.6s forwards; + + .hamburger_line { + background-color: var(--text-light) !important; + transition-delay: 0.2s; + + &:nth-child(1) { + transform: translateY(8px) rotate(45deg); + } + + &:nth-child(2) { + opacity: 0; + } + + &:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); + } + } + } + } } -} +} \ No newline at end of file diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index a75cd34..32774aa 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -5,8 +5,6 @@ import { MouseEvent, useEffect, useState } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import Logo from './Logo'; -import Menu from './Menu'; -import Exit from './Exit'; import Banner from '/public/Navbar/mlh-banner-2025.svg'; @@ -32,7 +30,7 @@ const links = [ { body: 'HOME', page: '/', - path: '/', + path: '/?section=home', // remove section if scroll issue fixed id: 'home', color: '#005271', }, @@ -43,13 +41,6 @@ const links = [ id: 'donate', color: '#FFC53D', }, - { - body: 'ABOUT', - page: '/about-us', - path: '/about-us', - id: 'about', - color: '#005271', - }, { body: 'FAQ', page: '/', @@ -64,6 +55,13 @@ const links = [ id: 'sponsors', color: '#FFF', }, + { + body: 'ABOUT', + page: '/about-us', + path: '/about-us?section=about', // remove section if scroll issue fixed + id: 'about', + color: '#005271', + }, ] as NavLink[]; const sections = [ @@ -189,7 +187,8 @@ export default function Navbar() { }, [pathname]); useEffect(() => { - const currentSection = section || (pathname === '/' ? 'home' : 'about'); + // const currentSection = section || (pathname === '/' ? 'home' : 'about'); + const currentSection = section; const sectionContainer = document.getElementById(currentSection as string); if (sectionContainer) { sectionContainer.scrollIntoView({ behavior: 'smooth' }); @@ -199,6 +198,7 @@ export default function Navbar() { const getClickHandler = (path: string) => { return (e: MouseEvent) => { e.preventDefault(); + setShowNavbar(false); router.push(path, { scroll: false }); }; }; @@ -227,7 +227,9 @@ export default function Navbar() {
- +
+ +
mlh 2025 banner
- {showNavbar ? ( -
setShowNavbar(false)}> - -
- ) : ( -
setShowNavbar(true)}> - +
setShowNavbar(!showNavbar)}> +
+ + +
- )} +
); From c29ac373fef0d064f2176380abb02b4c6f838b3b Mon Sep 17 00:00:00 2001 From: brandonw504 Date: Mon, 10 Feb 2025 23:08:49 -0800 Subject: [PATCH 7/7] Bugfixes --- app/(pages)/(index-page)/page.tsx | 4 ++-- app/(pages)/_components/Navbar/Navbar.tsx | 7 ------- .../about-us/_components/Archives/Archives.module.scss | 2 -- 3 files changed, 2 insertions(+), 11 deletions(-) diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx index 8ab2755..4a08357 100644 --- a/app/(pages)/(index-page)/page.tsx +++ b/app/(pages)/(index-page)/page.tsx @@ -16,10 +16,10 @@ export default function Home() {
-
@@ -29,8 +29,8 @@ export default function Home() {
+
-
); } diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx index 053a17a..1eeb595 100644 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ b/app/(pages)/_components/Navbar/Navbar.tsx @@ -5,8 +5,6 @@ import { MouseEvent, useEffect, useState } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import Logo from './Logo'; -import Menu from './Menu'; -import Exit from './Exit'; import Banner from '/public/Navbar/mlh-banner-2025.svg'; @@ -34,35 +32,30 @@ const links = [ page: '/', path: '/?section=home', // remove section if scroll issue fixed id: 'home', - color: '#005271', }, { body: 'DONATE', page: '/', path: '/?section=donate', id: 'donate', - color: '#FFC53D', }, { body: 'FAQ', page: '/', path: '/?section=faq', id: 'faq', - color: '#AFD157', }, { body: 'SPONSORS', page: '/', path: '/?section=sponsors', id: 'sponsors', - color: '#FFF', }, { body: 'ABOUT', page: '/about-us', path: '/about-us?section=about', // remove section if scroll issue fixed id: 'about', - color: '#005271', }, ] as NavLink[]; diff --git a/app/(pages)/about-us/_components/Archives/Archives.module.scss b/app/(pages)/about-us/_components/Archives/Archives.module.scss index ede4bff..9e53e6e 100644 --- a/app/(pages)/about-us/_components/Archives/Archives.module.scss +++ b/app/(pages)/about-us/_components/Archives/Archives.module.scss @@ -12,8 +12,6 @@ $padding-x-mobile: 13%; flex-direction: column; gap: $padding-y; padding: $padding-y 0; - - margin-top: 500px; @include phone { gap: $padding-y-mobile;