Added logo as svg

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/Header/DropdownMenu.js

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

src/Header/Header.js

@@ -1,12 +1,19 @@
-import logo from './logo.jpg';
+import logo from './logo.svg';
 import DropdownMenu from "./DropdownMenu";
-import OpenPage from "./OpenPage";
+// import OpenPage from "./OpenPage";
+import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import { Outlet } from "react-router-dom";
 import "./Header.css";
 
 export default function Header() {
     const [isDropdownVisible, setDropdownVisible] = useState(false);
+    const navigate = useNavigate();
+
+    const OpenPage = (arg) => {    
+        navigate(arg);
+        console.log(arg);
+    };
 
     const handleMouseEnter = () => {
         setDropdownVisible(true);
@@ -20,7 +27,7 @@ export default function Header() {
         <>
             <header>
                 <div>
-                    <img src={logo} alt="logo" />
+                    <img style={{background: "gray"}} onClick = {() => OpenPage('/')} src={logo} alt="logo" />
                     <p>Schulich Offroad</p>
                 </div>
                 <div>

src/Header/OpenPage.js

@@ -4,7 +4,6 @@ const OpenPage = (arg) => {
     const navigate = useNavigate();
     navigate(arg);
     console.log(arg);
-
 };
 
 export default OpenPage;