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..8e2a009 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); @@ -15,75 +16,528 @@ 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); + 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'),