Skip to content

Commit d3c3b1e

Browse files
monty2464monty2464
committed
Fixed phone dropdown menu and allignment
1 parent ac7e145 commit d3c3b1e

File tree

6 files changed

+33
-38
lines changed

6 files changed

+33
-38
lines changed

‎src/assets/pics/sponsors/Amtrak.png‎

-17.1 KB
Binary file not shown.

‎src/assets/pics/sponsors/EastPennManufacturer.jpeg‎

-137 KB
Binary file not shown.

‎src/pages/general/navigation/Navigation.tsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Third party
2-
import React, { useState } from 'react'
2+
import React, { useMemo, useState } from 'react'
33
import { Navbar, NavLink, NavDropdown } from 'react-bootstrap'
44
import { Link } from 'react-router-dom'
55

@@ -21,28 +21,30 @@ const Navigation = (): React.ReactElement => {
2121

2222
// State for handling dropdown visibility
2323
const [showDropdown, setShowDropdown] = useState(false)
24-
24+
const isDesktop = useMemo(() => {
25+
if (typeof window === 'undefined') return false
26+
return window.matchMedia('(hover: hover) and (pointer: fine)').matches
27+
}, [])
2528
// Timeout variable to prevent flickering
2629
let hideDropdownTimeout: NodeJS.Timeout
2730

2831
// Open dropdown when hovering over "Projects"
2932
const handleMouseEnter = (): void => {
30-
clearTimeout(hideDropdownTimeout) // Cancel hide if mouse enters again
31-
setShowDropdown(true)
33+
if(isDesktop){
34+
clearTimeout(hideDropdownTimeout) // Cancel hide if mouse enters again
35+
setShowDropdown(true)
36+
}
3237
}
3338

3439
// Close dropdown when mouse leaves (with small delay)
3540
const handleMouseLeave = (): void => {
36-
hideDropdownTimeout = setTimeout(() => {
37-
setShowDropdown(false)
38-
}, 400) // Small delay before closing
41+
if(isDesktop){
42+
hideDropdownTimeout = setTimeout(() => {
43+
setShowDropdown(false)
44+
}, 400) // Small delay before closing
45+
}
3946
}
4047

41-
// Close dropdown when clicking a project
42-
const handleItemClick = (): void => {
43-
setShowDropdown(false) // Close dropdown when a project is clicked
44-
scrollToTop()
45-
}
4648

4749
return (
4850
<>
@@ -78,15 +80,20 @@ const Navigation = (): React.ReactElement => {
7880
title='Projects'
7981
id='projects-dropdown'
8082
show={showDropdown}
81-
className='nav-link'>
83+
className='nav-link'
84+
onToggle={(nextShow /* boolean */) => {
85+
if (!isDesktop) setShowDropdown(nextShow)
86+
}}
87+
// Close on any item selection
88+
onSelect={() => setShowDropdown(false)}>
8289
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
83-
<NavDropdown.Item as={Link} to={Constants.PATHS.ROBOTICS} onClick={handleItemClick}>
90+
<NavDropdown.Item eventKey='4' as={Link} to={Constants.PATHS.ROBOTICS} onClick={scrollToTop}>
8491
Robotics
8592
</NavDropdown.Item>
86-
<NavDropdown.Item as={Link} to={Constants.PATHS.ROCKSAT} onClick={handleItemClick}>
93+
<NavDropdown.Item eventKey='5' as={Link} to={Constants.PATHS.ROCKSAT} onClick={scrollToTop}>
8794
RockSat
8895
</NavDropdown.Item>
89-
<NavDropdown.Item as={Link} to={Constants.PATHS.BALLOONING} onClick={handleItemClick}>
96+
<NavDropdown.Item eventKey='6' as={Link} to={Constants.PATHS.BALLOONING} onClick={scrollToTop}>
9097
NASA Ballooning
9198
</NavDropdown.Item>
9299
</div>

‎src/pages/general/navigation/NavigationStyles.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export default class NavigationStyles {
6262
& > a.nav-link.active {
6363
background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
6464
}
65+
6566
6667
& > a.nav-link:hover {
6768
color: ${COLORS.HOVER_TEXT} !important;
@@ -86,12 +87,16 @@ export default class NavigationStyles {
8687
}
8788
8889
a.dropdown-toggle {
89-
background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
90+
background-color: ${props => props.toggle ? `${COLORS.BACKGROUND}` : 'transparent'} !important;
9091
color: ${COLORS.TEXT} !important;
9192
font-size: 17px;
92-
padding: 6px 8px 8px 8px;
93+
padding-left: 5%;
9394
}
9495
96+
a.dropdown-item.active {
97+
background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
98+
}
99+
95100
.dropdown-menu {
96101
position: absolute;
97102
background-color: ${props => props.transparency ? 'transparent' : `${COLORS.PRIMARY}`} !important;

‎src/pages/sponsors/Sponsors.tsx‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
import React from 'react'
33
import { AiOutlineDash } from 'react-icons/ai'
44
import { ReactComponent as Lockheed } from '../../assets/pics/sponsors/lockheed-martin-logo.svg'
5-
import { ReactComponent as Nasa } from '../../assets/pics/sponsors/nasa-logo.svg'
5+
// import { ReactComponent as Nasa } from '../../assets/pics/sponsors/nasa-logo.svg'
66
// import { ReactComponent as Arrow } from '../../assets/pics/sponsors/arrow-logo.svg'
7-
// import { ReactComponent as Amtrack } from '../../assets/pics/sponsors/Amtrack-png.svg'
87
import Button from '../general/button/Button'
98
//import HStyles from '../home/HomeStyles'
109

@@ -34,9 +33,9 @@ const Sponsors = (): React.ReactElement => {
3433
<div className='img-container' id='centered-img'>
3534
<h1 className='title'>Current Sponsors</h1>
3635
</div>
37-
<div className='img-container' style={{background: '#053a92'}}>
36+
{/* <div className='img-container' style={{background: '#053a92'}}>
3837
<Nasa />
39-
</div>
38+
</div> */}
4039
<div className='img-container' style={{background: 'white'}}>
4140
<img src={SponsorImages.HAAS} style={{width: '25%', height: '165%'}}/>
4241
</div>
@@ -49,21 +48,6 @@ const Sponsors = (): React.ReactElement => {
4948
<div className='img-container' style={{background: 'white'}}>
5049
<img src={SponsorImages.Stratasys} style={{width: '40%', height: '70%'}}/>
5150
</div>
52-
{/* <div className='img-container' id='centered-img'>
53-
<h1 className='title'>Previous Sponsors</h1>
54-
</div>
55-
<div className='img-container' style={{background: 'white'}}>
56-
<img src={SponsorImages.Amtrack} style={{width: '60%'}}/>
57-
</div>
58-
<div className='img-container' style={{background: 'black'}}>
59-
<Arrow />
60-
</div>
61-
<div className='img-container' style={{background: 'white'}}>
62-
<img src={SponsorImages.hillock} style={{width: '60%'}}/>
63-
</div>
64-
<div className='img-container' style={{background: 'wihte'}}>
65-
call amtrak image here, make sure it has been transerred into an svg
66-
</div> */}
6751

6852

6953
<Contact/>

‎src/pages/sponsors/SponsorsStyles.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ export class SponsorImages {
55
static readonly arrow = require('../../assets/pics/sponsors/arrow.png')
66
static readonly nasa = require('../../assets/pics/sponsors/nasa-name.png')
77
static readonly hillock = require('../../assets/pics/sponsors/hillock-anodizing.png')
8-
static readonly Amtrack = require('../../assets/pics/sponsors/Amtrak.png')
98
static readonly EastPenn = require('../../assets/pics/sponsors/EastPennManufacturer.jpg')
109
static readonly Stratasys = require('../../assets/pics/sponsors/Stratasys_logo.jpg')
1110
static readonly HAAS = require('../../assets/pics/sponsors/GHF_Logo_DarkBackground.png')

0 commit comments

Comments
 (0)