Changed Nav bar layout and combined 3 projects into dropdown

Author: Malin Kussi

src/pages/general/navigation/Navigation.tsx

@@ -1,8 +1,7 @@
 // Third party
-import React from 'react'
-import { Navbar, NavLink } from 'react-bootstrap'
+import React, { useState } from 'react'
+import { Navbar, NavLink, NavDropdown } from 'react-bootstrap'
 import { Link } from 'react-router-dom'
-//import {motion} from 'framer-motion';  framer motion bug (maybe this project is just too outdated)
 
 // Custom styles
 import Styles from './NavigationStyles'
@@ -17,10 +16,13 @@ import nasaLogo from '../../../assets/pics/logos/nasa.png'
 const Navigation = (): React.ReactElement => {
 	const { scroll } = getScrollY()
 	const { width } = useWindowSize()
-	const  TEAMS = `https://teams.microsoft.com/l/team/19%3aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f
+	const TEAMS = `https://teams.microsoft.com/l/team/19%3aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f
 		78ecbb-62f3-4b2c-bda7-7488eca908ee&tenantId=716e81ef-b522-4473-8e31-10bd02ccf6e5`
-	return (
 
+	// State for handling dropdown hover
+	const [showDropdown, setShowDropdown] = useState(false)
+
+	return (
 		<>
 			{/* The rest of the navigation bar. The className is dependent on whether the navbar is expanded or not */}
 			<Styles.NavigationBar id='navbar-transition'
@@ -44,12 +46,24 @@ const Navigation = (): React.ReactElement => {
 						<NavLink eventKey='1' as={Link} to={Constants.PATHS.HOME} onClick={scrollToTop}>Home</NavLink>
 						<NavLink eventKey='2' as={Link} to={Constants.PATHS.EVENTS} onClick={scrollToTop}>Events</NavLink>
 						<NavLink eventKey='3' as={Link} to={Constants.PATHS.SPONSORS} onClick={scrollToTop}>Sponsors</NavLink>
-						<NavLink eventKey='4' as={Link} to={Constants.PATHS.ROBOTICS} onClick={scrollToTop}>Robotics</NavLink>
-						<NavLink eventKey='5' as={Link} to={Constants.PATHS.ROCKSAT} onClick={scrollToTop}>RockSat</NavLink>
-						<NavLink eventKey='6' as={Link} to={Constants.PATHS.BALLOONING} onClick={scrollToTop}>NASA Ballooning</NavLink>
-						<NavLink eventKey='8' as={Link} to={Constants.PATHS.MEETTHELEADS} onClick={scrollToTop}>
-							Meet Our Robotics Leads
-						</NavLink>
+						{/* Projects Dropdown - Opens on Hover */}
+						<NavDropdown
+							title='Projects'
+							id='projects-dropdown'
+							show={showDropdown}
+							onMouseEnter={() => setShowDropdown(true)}
+							onMouseLeave={() => setShowDropdown(false)}
+							className='nav-link'>
+							<NavDropdown.Item as={Link} to={Constants.PATHS.ROBOTICS} onClick={scrollToTop}>
+								Robotics
+							</NavDropdown.Item>
+							<NavDropdown.Item as={Link} to={Constants.PATHS.ROCKSAT} onClick={scrollToTop}>
+								RockSat
+							</NavDropdown.Item>
+							<NavDropdown.Item as={Link} to={Constants.PATHS.BALLOONING} onClick={scrollToTop}>
+								NASA Ballooning
+							</NavDropdown.Item>
+						</NavDropdown>
 					</Styles.NavbarLinks>
 				</Navbar.Collapse>
 			</Styles.NavigationBar>

src/pages/general/navigation/NavigationStyles.tsx

@@ -73,5 +73,41 @@ export default class NavigationStyles {
 			padding-left: 5%;
 			font-size: 18px;
 		}
+		
+		/* Dropdown Styling */
+		.nav-item {
+			position: relative;
+			padding: 4px 8px 8px 8px;
+		}
+
+		a.dropdown-toggle {
+			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+			color: ${COLORS.TEXT} !important;
+			font-size: 16px;
+		}
+
+		/* Show dropdown on hover */
+		.nav-item:hover .dropdown-menu {
+			display: block !important;
+		}
+
+		.dropdown-menu {
+			display: none;
+			position: absolute;
+			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+			padding: 0px 8px 8px 13px;
+			border: none;
+		}
+
+		.dropdown-item {
+			color: ${COLORS.TEXT} !important;
+			font-size: 15px;
+			border: none;
+		}
+
+		.dropdown-item:hover {
+			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+			color: ${COLORS.HOVER_TEXT} !important;
+		}
 	`
 }

src/pages/home/Home.tsx

@@ -38,9 +38,9 @@ const Home = (): React.ReactElement => {
 
 			<Styles.SectionHeaderGradient>
 				<Styles.SectionHeader>
-					<h2>Sign up for volunteering and contact us on teams!</h2>
+					<h2>Contact us on teams!</h2>
 					<div className='button-container'>
-						<Button text={'Sign up to Volunteer'} size={'large'} source={'https://forms.gle/1RcJw5DNXHVX2YzD8'}/>
+						{/* <Button text={'Sign up to Volunteer'} size={'large'} source={'https://forms.gle/1RcJw5DNXHVX2YzD8'}/> */}
 						<Button text='Join Teams Here!' source={TEAMS}/>
 					</div>
 				</Styles.SectionHeader>