Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 05:44:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

Simplified code

Browse Source
This commit is contained in:
Sarim-Sheikh-2003 2023-11-04 15:06:48 -06:00
parent 095e9aa1a6
commit 31282d5407
3 changed files with 8 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Header/DropdownMenu.js
View File

@ -1,18 +1,12 @@
// import OpenPage from "./OpenPage";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const DropdownMenu = () => { const DropdownMenu = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const OpenPage = (arg) => {
navigate(arg);
console.log(arg);
};
return ( return (
<div> <div>
<button type = "button" onClick = {() => OpenPage('/JoinTheClub')}>Join the Club</button> <button type = "button" onClick = {() => navigate('/JoinTheClub')}>Join the Club</button>
<button type = "button" onClick = {() => OpenPage('/UpcomingEvents')}>Upcoming Events</button> <button type = "button" onClick = {() => navigate('/UpcomingEvents')}>Upcoming Events</button>
</div> </div>
); );
}; };

19
src/Header/Header.js
View File

@ -1,6 +1,5 @@
import logo from './logo.png'; import logo from './logo.png';
import DropdownMenu from "./DropdownMenu"; import DropdownMenu from "./DropdownMenu";
// import OpenPage from "./OpenPage";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useState } from "react"; import { useState } from "react";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
@ -10,11 +9,6 @@ export default function Header() {
const [isDropdownVisible, setDropdownVisible] = useState(false); const [isDropdownVisible, setDropdownVisible] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const OpenPage = (arg) => {
navigate(arg);
console.log(arg);
};
const handleMouseEnter = () => { const handleMouseEnter = () => {
setDropdownVisible(true); setDropdownVisible(true);
}; };
@ -27,23 +21,22 @@ export default function Header() {
<> <>
<header> <header>
<div> <div>
<img style={{background: "gray"}} onClick = {() => OpenPage('/')} src={logo} alt="logo" /> <img onClick = {() => navigate('/')} src={logo} alt="logo" />
<p>Schulich Offroad</p> <p>Schulich Offroad</p>
</div> </div>
<div> <div>
<button type = "button" onClick = {() => OpenPage('/')}>About Us</button> <button type = "button" onClick = {() => navigate('/')}>About Us</button>
<button type = "button" onClick = {() => OpenPage('/Teams')}>Teams</button> <button type = "button" onClick = {() => navigate('/Teams')}>Teams</button>
<button type = "button" onClick = {() => OpenPage('/OurSponsors')}>Our Sponsors</button> <button type = "button" onClick = {() => navigate('/OurSponsors')}>Our Sponsors</button>
<button type = "button" onClick = {() => OpenPage('/BecomeASponsor')}>Become a Sponsor</button> <button type = "button" onClick = {() => navigate('/BecomeASponsor')}>Become a Sponsor</button>
<div <div
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
style={{background: "red"}}
> >
<button type = "button">Club Membership & Upcoming Events</button> <button type = "button">Club Membership & Upcoming Events</button>
{isDropdownVisible && <DropdownMenu />} {isDropdownVisible && <DropdownMenu />}
</div> </div>
<button type = "button" onClick = {() => OpenPage('/Gallery')}>Gallery</button> <button type = "button" onClick = {() => navigate('/Gallery')}>Gallery</button>
</div> </div>
</header> </header>
<Outlet /> <Outlet />

9
src/Header/OpenPage.js
View File

@ -1,9 +0,0 @@
import { useNavigate } from "react-router-dom";
const OpenPage = (arg) => {
const navigate = useNavigate();
navigate(arg);
console.log(arg);
};
export default OpenPage;