feat(header): Naviagtion/header setup, need to add banner image to each one

src/Header/Header.css

@@ -1,8 +1,14 @@
 header {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	margin: 1%;
-	margin-top: 0%;
+	margin-top: 1svh;
+
+	align-items: center;
+
+	/* background-color: aqua; */
+
+	/* background-image: url(); */
 }
 
 header a {
@@ -11,18 +17,15 @@ header a {
 	cursor: pointer;
 }
 
-figure {
-	margin: 0px;
-	height: 10%;
-}
-
-header figure {
-	cursor: pointer;
-}
-
 #logo {
-	height: 5rem;
+	height: 10svh;
-	background-color: white;
+	/* background-color: white; */
+
+	padding: 0.15rem;
+}
+
+nav {
+	padding-left: 1svw;
 }
 
 nav a {
@@ -34,7 +37,11 @@ nav a {
 nav a li {
 	background-color: white;
 	padding: 0.5rem;
-	border: solid 1px gray;
+	border-left: solid 1px gray;
+}
+
+#FirstNav {
+	border-left: none;
 }
 
 nav a li:hover {
@@ -87,18 +94,24 @@ header div {
 	align-items: center;
 }
 header div button {
-	border: none;
 	cursor: pointer;
-	height: 4rem;
+	height: 3rem;
-	width: 4rem;
+	width: 3rem;
-	align-items: center;
+	justify-content: end;
 	background-color: inherit;
 	border: solid 2px gray;
 	border-radius: 1rem;
 }
 
 header div button img {
-	width: 100%;
+	height: 2rem;
+}
+
+header div {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	flex-grow: 1;
 }
 
 /* for dark mode */

src/Header/Header.js

@@ -1,4 +1,4 @@
-import logo from "./logo.webp";
+import logo from "./logo.png";
 import lightDark from "./light-dark.webp";
 import { Outlet, Link } from "react-router-dom";
 import "./Header.css";
@@ -9,9 +9,9 @@ import Ender from "../Footer/Ender";
  * @returns {JSX.Element} JSX - HTML tags and JS functionality
  * @description The top header part of the page includes the naviagtion
  * @author Brock <darkicewolf50@gmail.com>
- * @todo final css add baja but eon (baja leads chat)
+ * @todo add appropriate links
  */
-const Header = () => {
+export default function Header(props) {
 	/**
 	 * @param {null} null -  Takes in nothing
 	 * @returns {CSSStyleRule} CSS - changes page to darkmode
@@ -44,43 +44,36 @@ const Header = () => {
 	return (
 		<>
 			<header>
-				<div>
 				<Link to={"/"}>
-						<figure>
 					<img
 						id="logo"
 						src={logo}
 						alt="Schulich Off-Road's logo"
 					/>
-							<figcaption>
-								<h1>Schulich Offroad</h1>
-							</figcaption>
-						</figure>
 				</Link>
-					<button onClick={switchDarkMode}>
-						<img
-							id="darkModeToggle"
-							src={lightDark}
-							alt="Light/Dark Toggle Symbol"
-						/>
-					</button>
-				</div>
 				<nav>
 					<ul>
 						<Link to={"/"}>
-							<li>About Us</li>
+							<li id="FirstNav">Home</li>
+						</Link>
+						<Link to={"/"}>
+							<li>About</li>
 						</Link>
 						<Link to={"/Teams"}>
-							<li>Teams</li>
+							<li>Team</li>
+						</Link>
+						<Link to={"/"}>
+							<li>History</li>
 						</Link>
 						<Link to={"/OurSponsors"}>
-							<li>Our Sponsors</li>
+							<li>Sponsors</li>
 						</Link>
 						<Link to={"/OurSponsors"}>
 							<li>Become a Sponsor</li>
 						</Link>
-						<li className="DropDown">
+						{/* Removed as no longer needed */}
-							{/* this link and li only exits for styling purposes */}
+						{/* <li className="DropDown">
+							{/* this link and li only exits for styling purposes }
 							<Link className="DropDownHeader">
 								Club Membership & Upcoming Events
 							</Link>
@@ -96,8 +89,8 @@ const Header = () => {
 									<li>Previous Events</li>
 								</Link>
 							</ul>
-						</li>
+						</li> */}
-						<li className="DropDown">
+						{/* <li className="DropDown">
 							<Link className="DropDownHeader">More...</Link>
 							<ul className="Hide">
 								<Link to={"/Gallery"}>
@@ -107,14 +100,24 @@ const Header = () => {
 									<li>Roster</li>
 								</Link>
 							</ul>
-						</li>
+						</li> */}
+						<Link to={"/"}>
+							<li>Contact Us</li>
+						</Link>
 					</ul>
 				</nav>
+				<div>
+					<button onClick={switchDarkMode}>
+						<img
+							id="darkModeToggle"
+							src={lightDark}
+							alt="Light/Dark Toggle Symbol"
+						/>
+					</button>
+				</div>
 			</header>
 			<Outlet />
 			<Ender />
 		</>
 	);
-};
+}
-
-export default Header;