From e376ac4e70ac5c8b5d074f514cf51e14fe1e6caa Mon Sep 17 00:00:00 2001 From: emilym Date: Wed, 1 Jan 2025 01:24:25 -0500 Subject: [PATCH 1/2] fix nav bar --- src/App.tsx | 3 +- src/components/Navbar.tsx | 469 +++++++++++++++++++++++++++++++++----- src/components/Team.tsx | 14 +- 3 files changed, 418 insertions(+), 68 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 257c440..b3b88cb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -46,10 +46,11 @@ function App() {
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 7a18728..7239e74 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,13 +1,14 @@ import "../App.css"; import logo from "../images/MVH8LogoOld.png"; -import Typography from '@mui/joy/Typography'; -import Link from '@mui/joy/Link'; -import Drawer from '@mui/joy/Drawer'; -import List from '@mui/joy/List'; -import ListItemButton from '@mui/joy/ListItemButton'; -import IconButton from '@mui/joy/IconButton'; -import Menu from '@mui/icons-material/Menu'; -import React, { useState, useEffect } from 'react'; +import Typography from "@mui/joy/Typography"; +import Box from "@mui/joy/Box"; +import Link from "@mui/joy/Link"; +import Drawer from "@mui/joy/Drawer"; +import List from "@mui/joy/List"; +import ListItemButton from "@mui/joy/ListItemButton"; +import IconButton from "@mui/joy/IconButton"; +import Menu from "@mui/icons-material/Menu"; +import React, { useState, useEffect } from "react"; export default function Navbar({ onOptionSelect }: any) { const [isVisible, setIsVisible] = useState(true); @@ -18,72 +19,420 @@ export default function Navbar({ onOptionSelect }: any) { setIsVisible(window.innerWidth > 830); // Adjust the breakpoint as needed }; - window.addEventListener('resize', handleResize); + window.addEventListener("resize", handleResize); handleResize(); // Initial check on component mount return () => { - window.removeEventListener('resize', handleResize); + window.removeEventListener("resize", handleResize); }; }, []); - const toggleDrawer = (inOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { - if ( - event.type === 'keydown' && - ((event as React.KeyboardEvent).key === 'Tab' || - (event as React.KeyboardEvent).key === 'Shift') - ) { - return; - } + const toggleDrawer = + (inOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { + if ( + event.type === "keydown" && + ((event as React.KeyboardEvent).key === "Tab" || + (event as React.KeyboardEvent).key === "Shift") + ) { + return; + } - setDrawerOpen(inOpen); - }; + setDrawerOpen(inOpen); + }; const handleDrawerOption = (option: string) => { setDrawerOpen(false); onOptionSelect(option); - } + }; return ( -
-
- mvhackslogo - onOptionSelect('home')}> - MV - HACKS 8.0 - - {!isVisible && (
- setDrawerOpen(true)}> - - - - +
+ {!isVisible && ( + div': { justifyContent: 'center' }, - }}> - handleDrawerOption('home')}>Home - Apply - handleDrawerOption('info')}>Info - handleDrawerOption('schedule')}>Schedule - handleDrawerOption('faqs')}>Faqs - handleDrawerOption('sponsor')}>Sponsors - handleDrawerOption('team')}>Team - - -
)} + display: "flex", + alignItems: "center", + justifyContent: "space-between", + }} + > + + mvhackslogo + onOptionSelect("home")} + > + + MVHacks 8.0 + + + + setDrawerOpen(true)} + > + + + + + handleDrawerOption("home")} + > + Home + + handleDrawerOption("info")} + > + Info + + handleDrawerOption("schedule")} + > + Schedule + + handleDrawerOption("faqs")} + > + Faqs + + handleDrawerOption("sponsor")} + > + Sponsors + + handleDrawerOption("team")} + > + Team + + + Apply + + + + + )}
- {isVisible && (
- onOptionSelect('home')}>HOME - APPLY - onOptionSelect('info')}>INFO - onOptionSelect('schedule')}>SCHEDULE - onOptionSelect('faqs')}>FAQS - onOptionSelect('sponsor')}>SPONSORS - onOptionSelect('team')}>TEAM -
)} + {isVisible && ( + + + mvhackslogo + onOptionSelect("home")} + > + + MVHacks 8.0 + + + + + onOptionSelect("home")} + > + + Home + + + + + Apply + + + onOptionSelect("info")} + > + + Info + + + onOptionSelect("schedule")} + > + + Schedule + + + onOptionSelect("faqs")} + > + + Faqs + + + onOptionSelect("sponsor")} + > + + Sponsors + + + onOptionSelect("team")} + > + + Team + + + + + )}
); -} \ No newline at end of file +} diff --git a/src/components/Team.tsx b/src/components/Team.tsx index 1dd416f..e7d78a1 100644 --- a/src/components/Team.tsx +++ b/src/components/Team.tsx @@ -15,33 +15,33 @@ function addPerson(name: string, image: string, role: string, link: string, type const directors = [ addPerson('Alexandra Markova', 'https://i.imgur.com/BBWqwhs.jpeg', 'Director', 'https://github.com/kitkatmia','Github'), addPerson('Saahiti Bondalapati', 'https://i.imgur.com/16sqDdo.png', 'Outreach Director', 'saahiti@mvhacks.io','Email'), - addPerson('Arthur Cheong', blank, 'Emcee', 'arthurc@mvhacks.io','Email'), addPerson('Emily Markova', 'https://i.imgur.com/wTrB5jy.jpeg', 'Tech Director', 'https://github.com/emilymarkova','Github'), - addPerson('Yhali Matot', blank, 'Sponsorship Director', 'alexm@mvhacks.io','Email') + addPerson('Yhali Matot', blank, 'Sponsorship Director', 'alexm@mvhacks.io', 'Email'), + addPerson('Arthur Cheong', blank, 'Emcee', 'arthurc@mvhacks.io','Email') ]; const tech = [ + addPerson('Emily Markova', 'https://i.imgur.com/wTrB5jy.jpeg', 'Tech Director', 'emily@mvhacks.io','Email'), addPerson('Noam Kassoff', 'https://i.imgur.com/YZLuaM4.png', 'Member', 'https://github.com/noamkassoff','Github'), addPerson('Milo Lin', 'https://i.imgur.com/QvoGuW5.jpeg', 'Member', 'milo@mvhacks.io','Email'), - addPerson('Emily Markova', 'https://i.imgur.com/wTrB5jy.jpeg', 'Director', 'emily@mvhacks.io','Email'), addPerson('Mia Ravishankar', blank, 'Member', 'miar@mvhacks.io','Email'), addPerson('Evelyn Yang', 'https://i.imgur.com/5b927dF.png', 'Member', 'evelyny@mvhacks.io','Email'), addPerson('Jeremy Yu', 'https://i.imgur.com/VNapq9L.png', 'Member', 'https://github.com/jt31415','Github') ]; const outreach = [ - addPerson('Saahiti Bondalapati', 'https://i.imgur.com/16sqDdo.png', 'Director', 'saahiti@mvhacks.io', 'Email'), - addPerson('Rohin Gupta', blank, 'Member', 'alexm@mvhacks.io','Email'), + addPerson('Saahiti Bondalapati', 'https://i.imgur.com/16sqDdo.png', 'Outreach Director', 'saahiti@mvhacks.io', 'Email'), + addPerson('Rohin Gupta', blank, 'Member', 'rohin@mvhacks.io','Email'), addPerson('Nikita Narrang', 'https://i.imgur.com/QC4s8O0.jpeg', 'Member', 'nikita@mvhacks.io','Email'), addPerson('Ishaan Sharma', blank, 'Member', 'alexm@mvhacks.io','Email'), addPerson('Mirabel Wang', blank, 'Member', 'mirabelw@mvhacks.io','Email') ]; const sponsorship = [ - addPerson('Kirati Bollineni', blank, 'Member', 'alexm@mvhacks.io','Email'), + addPerson('Yhali Matot', blank, 'Sponsorship Director', 'alexm@mvhacks.io','Email'), + addPerson('Kirati Bollineni', blank, 'Member', 'alexm@mvhacks.io', 'Email'), addPerson('Ethan Chen', blank, 'Member', 'alexm@mvhacks.io','Email'), addPerson('Owen Kim', blank, 'Member', 'alexm@mvhacks.io','Email'), - addPerson('Yhali Matot', blank, 'Director', 'alexm@mvhacks.io','Email'), addPerson('Henry Shih', 'https://i.imgur.com/XSFwbkK.jpeg', 'Member', 'henry@mvhacks.io','Email'), addPerson('Shankaran Srivatsa', blank, 'Member', 'alexm@mvhacks.io','Email'), addPerson('Kevin Thompson', blank, 'Member', 'alexm@mvhacks.io','Email'), From 450807812aa4825d231266f542accf562c1ce527 Mon Sep 17 00:00:00 2001 From: emilym Date: Wed, 1 Jan 2025 01:48:21 -0500 Subject: [PATCH 2/2] adjust --- src/components/Navbar.tsx | 143 +++++++++++++++++++++++++++++++++----- 1 file changed, 124 insertions(+), 19 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 7239e74..8e2a009 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -16,7 +16,7 @@ export default function Navbar({ onOptionSelect }: any) { useEffect(() => { const handleResize = () => { - setIsVisible(window.innerWidth > 830); // Adjust the breakpoint as needed + setIsVisible(window.innerWidth > 1100); // Adjust the breakpoint as needed }; window.addEventListener("resize", handleResize); @@ -107,75 +107,166 @@ export default function Navbar({ onOptionSelect }: any) { > - + handleDrawerOption("home")} > - Home + + Home + handleDrawerOption("info")} > - Info + + Info + handleDrawerOption("schedule")} > - Schedule + + Schedule + handleDrawerOption("faqs")} > - Faqs + + Faqs + handleDrawerOption("sponsor")} > - Sponsors + + Sponsors + handleDrawerOption("team")} > - Team + + Team + - Apply + + Apply + @@ -314,7 +419,7 @@ export default function Navbar({ onOptionSelect }: any) { variant="plain" onClick={() => onOptionSelect("info")} > - onOptionSelect("schedule")} > - onOptionSelect("faqs")} > - onOptionSelect("sponsor")} > - onOptionSelect("team")} > -