BajaUofCWebsite/src/Header/Header.js

import logo from "./logo.png";
import lightDark from "./light-dark.webp";
import { Outlet, Link } from "react-router-dom";
import "./Header.css";
import Ender from "../Footer/Ender";
import { useState } from "react";

/**
 * @param {null} nothing - Takes in nothing
 * @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 add appropriate links
 */
export default function Header() {
	const [bannerInfo, setBannerInfo] = useState({
		titleText: "UCalgary Baja",
		subtitleText: "Hello",
		imgUrl: "https://picsum.photos/200",
		headerPostion: "absolute",
	});

	/**
	 * @param {null} nothing -  Takes in nothing
	 * @returns {CSSStyleRule} CSS - changes page to darkmode
	 * @description inverts all of the colors of body without touching the pictures
	 * @author Brock <darkicewolf50@gmail.com>
	 */
	const switchDarkMode = () => {
		const body = document.getElementById("root");
		const logoCss = document.getElementById("logo");

		body.classList.toggle("darkmode");
		logoCss.classList.toggle("logoAfterDark");
	};

	/**
	 * @param {null} nothing -  Takes in nothing
	 * @returns {CSSStyleRule} CSS - makes it compliant with bowser preferances
	 * @description checks for what the browser prefers
	 * @author Brock <darkicewolf50@gmail.com>
	 */
	document.addEventListener("DOMContentLoaded", () => {
		const prefersDarkMode =
			window.matchMedia &&
			window.matchMedia("(prefers-color-scheme: dark)").matches;
		if (prefersDarkMode) {
			switchDarkMode();
		}
	});

	return (
		<>
			<header
				style={{
					position:
						bannerInfo.titleText === "" && bannerInfo.imgUrl === ""
							? "relative"
							: "absolute",
				}}>
				<Link to={"/"}>
					<img
						id="logo"
						src={logo}
						alt="Schulich Off-Road's logo"
					/>
				</Link>
				<nav>
					<ul>
						<li>
							<Link to={"/"}>HOME</Link>
						</li>
						<li>
							<Link to={"/About"}>ABOUT</Link>
						</li>
						<li>
							<Link to={"/Vehicles"}>OUR VEHICLES</Link>
						</li>
						{/* <li>
							<Link to={"/"}>HISTORY</Link>
						</li> */}
						<li>
							<Link to={"/OurSponsors"}>SPONSORS</Link>
						</li>
						{/* <li>
							<Link to={"/OurSponsors"}>Become a Sponsor</Link>
						</li> */}
						{/* Removed as no longer needed */}
						{/* <li className="DropDown">
							{/* this link and li only exits for styling purposes }
							<Link className="DropDownHeader">
								Club Membership & Upcoming Events
							</Link>

							<ul className="Hide">
								<Link to={"/JoinTheClub"}>
									<li>Join the Club</li>
								</Link>
								<Link to={"/UpcomingEvents"}>
									<li>Upcoming Events</li>
								</Link>
								<Link>
									<li>Previous Events</li>
								</Link>
							</ul>
						</li> */}
						{/* <li className="DropDown">
							<Link className="DropDownHeader">More...</Link>
							<ul className="Hide">
								<Link to={"/Gallery"}>
									<li>Gallery</li>
								</Link>
								<Link>
									<li>Roster</li>
								</Link>
							</ul>
						</li> */}
						<li>
							<Link to={"/Contact"}>CONTACT US</Link>
						</li>
					</ul>
				</nav>
				<div>
					<button onClick={switchDarkMode}>
						<img
							id="darkModeToggle"
							src={lightDark}
							alt="Light/Dark Toggle Symbol"
						/>
					</button>
				</div>
			</header>
			{bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? (
				<></>
			) : (
				<>
					<div
						id="BannerHeader"
						style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>
						<div>
							<h1>{bannerInfo.titleText}</h1>
							{bannerInfo.subtitleText === "" ? (
								<></>
							) : (
								<h2>{bannerInfo.subtitleText}</h2>
							)}
						</div>
					</div>
				</>
			)}

			<Outlet context={{ bannerInfo, setBannerInfo }} />
			<Ender />
		</>
	);
}

// used like this
// <UpdateBanner
// 	updatedTitleText="UCalgary Bajaa"
// 	updatedSubtitleText="HelloDAAAA"
// 	updatedImgUrl="https://picsum.photos/200"
// 	updatetdImgAlt="Lorem Picsum"
// />