Added Functionality for Header and react router dom

src/Header/DropdownMenu.js

@@ -0,0 +1,11 @@
+import OpenPage from "./OpenPage";
+
+export default function DropdownMenu() {
+
+  return (
+    <div>
+      <button type = "button" onClick = {OpenPage('/JoinTheClub')}>Join the Club</button>
+      <button type = "button" onClick = {OpenPage('/UpcomingEvents')}>Upcoming Events</button>
+    </div>
+  );
+};

src/Header/Header.js

@@ -0,0 +1,44 @@
+import logo from './logo.jpg';
+import DropdownMenu from "./DropdownMenu";
+import OpenPage from "./OpenPage";
+import { useState } from "react";
+import { Outlet } from "react-router-dom";
+import "./Header.css";
+
+export default function Header() {
+    const [isDropdownVisible, setDropdownVisible] = useState(false);
+
+    const handleMouseEnter = () => {
+        setDropdownVisible(true);
+    };
+
+    const handleMouseLeave = () => {
+        setDropdownVisible(false);
+    };
+
+    return (
+        <>
+            <header>
+                <div>
+                    <img src={logo} alt="logo" />
+                    <p>Schulich Offroad</p>
+                </div>
+                <div>
+                    <button type = "button" onClick = {OpenPage('/')}>About Us</button>
+                    <button type = "button" onClick = {OpenPage('/Teams')}>Teams</button>
+                    <button type = "button" onClick = {OpenPage('/OurSponsors')}>Our Sponsors</button>
+                    <button type = "button" onClick = {OpenPage('/BecomeASponsor')}>Become a Sponsor</button>
+                    <div
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    >
+                        <button>Club Membership & Upcoming Events</button>
+                        {isDropdownVisible && <DropdownMenu />}
+                    </div>
+                    <button type = "button" onClick = {OpenPage('/Gallery')}>Gallery</button>
+                </div>
+            </header>
+            <Outlet />
+        </>
+    );
+};

src/Header/OpenPage.js

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