Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/navbar #61

Merged
merged 9 commits into from
Feb 11, 2025
Merged

Feat/navbar #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
65ae2ed
Updated navbar styles
brandonw504 Feb 9, 2025
405184f
Merge branch 'main' into feat/navbar
brandonw504 Feb 9, 2025
1f9a793
Removed navbar hiding on scroll
brandonw504 Feb 9, 2025
1006b85
Some mobile nav view
brandonw504 Feb 9, 2025
1ed10ee
Desktop nav
brandonw504 Feb 10, 2025
98b9109
Some bugfixes
brandonw504 Feb 11, 2025
bf2c7f7
Mobile nav
brandonw504 Feb 11, 2025
8ca6b13
Merge branch 'main' into feat/navbar
brandonw504 Feb 11, 2025
c29ac37
Bugfixes
brandonw504 Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/(pages)/(index-page)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ export default function Home() {
<div id="home">
<HeroSection />
<SandCastle />
<BigWave />
</div>

<div id="donate">
<BigWave />
<Underwater />
</div>

Expand All @@ -29,8 +29,8 @@ export default function Home() {

<div id="sponsors">
<Sponsors />
<BigVinyl />
</div>
<BigVinyl />
</div>
);
}
26 changes: 6 additions & 20 deletions app/(pages)/_components/Navbar/Logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<svg
style={{ width, height }}
viewBox="0 0 50 50"
fill={fill}
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.0578 25.3014V18.1276L0 33.1724L3.55815 36.8002L15.0578 25.3014ZM49.3689 20.8183C48.25 15.1884 44.0376 10.9817 43.5527 10.5127L33.2007 0L27.2854 5.91042L26.8647 6.33042V13.5034L33.1711 7.20253L39.0584 13.1806L39.9564 14.0924L40.0208 14.1549C40.0318 14.1659 40.416 14.5403 40.9568 15.1867C42.0631 16.5101 43.8244 18.9743 44.388 21.8053C45.2276 26.0341 45.65 30.9634 40.9568 36.9693V44.3839C41.3995 44.0011 41.6771 43.7264 41.777 43.6259C45.9758 39.5078 48.5065 35.3433 49.512 30.8957C50.3846 27.0388 49.9292 23.6366 49.3689 20.8183ZM18.021 42.9591L17.8619 42.8814L17.7848 42.8569C17.6731 42.8036 17.2542 42.5856 16.478 42.0253C16.0946 41.7473 15.6224 41.3856 15.0578 40.9183C14.2038 40.2101 13.1374 39.2602 11.8365 37.9935L8.92585 35.0256L5.33469 38.6112L8.22844 41.5605L8.26737 41.6002C12.7472 45.9709 15.0494 47.2191 15.8974 47.5664C18.9689 49.0385 21.8559 49.7366 24.4839 49.9369C25.9422 50.0484 27.3209 50.0061 28.6066 49.8574C28.7166 49.8447 28.8266 49.8312 28.9358 49.8169V44.6763C25.8626 45.2036 22.1538 44.9594 18.021 42.9591Z"
fill={fill}
/>
<path
d="M24.3265 8.86736V39.4901H17.5978V15.5907L18.2741 14.9147L18.6363 14.5538L20.6693 12.5223L22.0472 11.1448L22.4958 10.6969L23.8745 9.31862L24.3265 8.86736Z"
fill={fill}
/>
<path
d="M38.4172 15.716V46.2771C38.3876 46.2965 38.358 46.3159 38.3275 46.3354C38.0186 46.534 37.6894 46.7351 37.3423 46.9345C37.2281 47.0004 37.1121 47.0664 36.9928 47.1323C36.6805 47.3055 36.3546 47.4771 36.0152 47.6452C35.7021 47.8007 35.3771 47.9537 35.0411 48.1016C34.8582 48.1819 34.6729 48.2604 34.4833 48.339C34.2395 48.4388 33.9873 48.5368 33.7275 48.6323C33.5252 48.7075 33.3187 48.7793 33.1071 48.8503C32.6907 48.9914 32.2565 49.1233 31.8037 49.2458C31.6953 49.2754 31.5853 49.3033 31.4744 49.3311V15.716H38.4172Z"
fill={fill}
/>
<path d="M31.4753 23.7844H24.326V30.7174H31.4753V23.7844Z" fill={fill} />
<path d="M15.0578 25.3014V18.1276L0 33.1724L3.55815 36.8002L15.0578 25.3014ZM49.3689 20.8183C48.25 15.1884 44.0376 10.9817 43.5527 10.5127L33.2007 0L27.2854 5.91042L26.8647 6.33042V13.5034L33.1711 7.20253L39.0584 13.1806L39.9564 14.0924L40.0208 14.1549C40.0318 14.1659 40.416 14.5403 40.9568 15.1867C42.0631 16.5101 43.8244 18.9743 44.388 21.8053C45.2276 26.0341 45.65 30.9634 40.9568 36.9693V44.3839C41.3995 44.0011 41.6771 43.7264 41.777 43.6259C45.9758 39.5078 48.5065 35.3433 49.512 30.8957C50.3846 27.0388 49.9292 23.6366 49.3689 20.8183ZM18.021 42.9591L17.8619 42.8814L17.7848 42.8569C17.6731 42.8036 17.2542 42.5856 16.478 42.0253C16.0946 41.7473 15.6224 41.3856 15.0578 40.9183C14.2038 40.2101 13.1374 39.2602 11.8365 37.9935L8.92585 35.0256L5.33469 38.6112L8.22844 41.5605L8.26737 41.6002C12.7472 45.9709 15.0494 47.2191 15.8974 47.5664C18.9689 49.0385 21.8559 49.7366 24.4839 49.9369C25.9422 50.0484 27.3209 50.0061 28.6066 49.8574C28.7166 49.8447 28.8266 49.8312 28.9358 49.8169V44.6763C25.8626 45.2036 22.1538 44.9594 18.021 42.9591Z" />
<path d="M24.3265 8.86736V39.4901H17.5978V15.5907L18.2741 14.9147L18.6363 14.5538L20.6693 12.5223L22.0472 11.1448L22.4958 10.6969L23.8745 9.31862L24.3265 8.86736Z" />
<path d="M38.4172 15.716V46.2771C38.3876 46.2965 38.358 46.3159 38.3275 46.3354C38.0186 46.534 37.6894 46.7351 37.3423 46.9345C37.2281 47.0004 37.1121 47.0664 36.9928 47.1323C36.6805 47.3055 36.3546 47.4771 36.0152 47.6452C35.7021 47.8007 35.3771 47.9537 35.0411 48.1016C34.8582 48.1819 34.6729 48.2604 34.4833 48.339C34.2395 48.4388 33.9873 48.5368 33.7275 48.6323C33.5252 48.7075 33.3187 48.7793 33.1071 48.8503C32.6907 48.9914 32.2565 49.1233 31.8037 49.2458C31.6953 49.2754 31.5853 49.3033 31.4744 49.3311V15.716H38.4172Z" />
<path d="M31.4753 23.7844H24.326V30.7174H31.4753V23.7844Z" />
</svg>
);
}
74 changes: 62 additions & 12 deletions app/(pages)/_components/Navbar/Navbar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,21 +36,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 {
Expand All @@ -75,10 +83,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;
Expand Down Expand Up @@ -106,12 +114,54 @@
margin-right: 108px;
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);
}
}
}
}
}
}
}
54 changes: 30 additions & 24 deletions app/(pages)/_components/Navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -32,37 +30,32 @@ const links = [
{
body: 'HOME',
page: '/',
path: '/',
path: '/?section=home', // remove section if scroll issue fixed
id: 'home',
color: '#005271',
},
{
body: 'DONATE',
page: '/',
path: '/?section=donate',
id: 'donate',
color: '#FFC53D',
},
{
body: 'ABOUT',
page: '/about-us',
path: '/about-us',
id: 'about',
color: '#005271',
},
{
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',
},
] as NavLink[];

Expand Down Expand Up @@ -189,7 +182,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' });
Expand All @@ -199,6 +193,7 @@ export default function Navbar() {
const getClickHandler = (path: string) => {
return (e: MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
setShowNavbar(false);
router.push(path, { scroll: false });
};
};
Expand Down Expand Up @@ -227,7 +222,9 @@ export default function Navbar() {
<div
className={`${styles.navigation} ${showNavbar ? styles.visible : null}`}
>
<Logo fill={getLogoColor()} width="50px" height="50px" />
<div className={styles.logo} style={{ color: getLogoColor() }}>
<Logo height="50" width="50" />
</div>
<div
className={styles.links}
style={{
Expand Down Expand Up @@ -255,15 +252,24 @@ export default function Navbar() {
<div className={styles.mlh_banner}>
<Image src={Banner} alt="mlh 2025 banner" height={150} />
</div>
{showNavbar ? (
<div className={styles.exit} onClick={() => setShowNavbar(false)}>
<Exit width="23px" height="23px" />
</div>
) : (
<div className={styles.menu} onClick={() => setShowNavbar(true)}>
<Menu width="30px" height="20px" />
<div className={styles.menu} onClick={() => setShowNavbar(!showNavbar)}>
<div
className={`${showNavbar ? styles.hamburger_active : styles.hamburger}`}
>
<span
className={styles.hamburger_line}
style={{ backgroundColor: getLogoColor() }}
></span>
<span
className={styles.hamburger_line}
style={{ backgroundColor: getLogoColor() }}
></span>
<span
className={styles.hamburger_line}
style={{ backgroundColor: getLogoColor() }}
></span>
</div>
)}
</div>
</div>
</div>
);
Expand Down
2 changes: 0 additions & 2 deletions app/(pages)/about-us/_components/Archives/Archives.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down