mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-16 13:54:17 -06:00
165 lines
4.0 KiB
JavaScript
165 lines
4.0 KiB
JavaScript
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"
|
|
// />
|