feat(header): make it so that header can take in components for the banner, naviagtion and header changed to v3

src/Header/Header.css

@@ -3,12 +3,11 @@ header {
 	flex-direction: row;
 	margin: 1%;
 	margin-top: 1svh;
+	padding-right: 0.5svw;
 
 	align-items: center;
-
+	justify-content: space-between;
-	/* background-color: aqua; */
+	background-color: antiquewhite;
-
-	/* background-image: url(); */
 }
 
 header a {
@@ -17,15 +16,36 @@ header a {
 	cursor: pointer;
 }
 
+header div button {
+	cursor: pointer;
+	height: 3rem;
+	width: 3rem;
+	justify-content: end;
+	background-color: inherit;
+	border: solid 2px gray;
+	border-radius: 1rem;
+}
+
+header div button img {
+	height: 2rem;
+}
+
+header div {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
 #logo {
 	height: 10svh;
-	/* background-color: white; */
-
 	padding: 0.15rem;
 }
 
+/* naviagation section */
+
+/* determines spacing and total amount of page it takes up*/
 nav {
-	padding-left: 1svw;
+	width: 50%;
 }
 
 nav a {
@@ -37,9 +57,10 @@ nav a {
 nav a li {
 	background-color: white;
 	padding: 0.5rem;
-	border-left: solid 1px gray;
+	/* border-left: solid 2px gray; */
 }
-
+/* removes first divider */
+/* can be removed if no borders from above */
 #FirstNav {
 	border-left: none;
 }
@@ -51,10 +72,13 @@ nav a li:hover {
 nav ul {
 	display: flex;
 	flex-direction: row;
+	justify-content: space-between;
 	list-style: none;
 	margin: 0px;
 	padding: 0px;
 }
+creates dwon downs
+/*  */
 /* makes it so that the tags look the same whist having removing browser error */
 .DropDownHeader {
 	display: inline-block;
@@ -87,31 +111,50 @@ nav ul {
 	text-align: center;
 }
 
-header div {
+/* For Banner */
-	display: flex;
+
-	flex-direction: row;
+#BannerHeader {
-	justify-content: space-between;
+	height: 100svh;
-	align-items: center;
+	width: 100%;
-}
+
-header div button {
+	/* bebug border, use margin to advantage, may cause error later */
-	cursor: pointer;
+	/* border-bottom: solid 1px black; */
-	height: 3rem;
-	width: 3rem;
-	justify-content: end;
-	background-color: inherit;
-	border: solid 2px gray;
-	border-radius: 1rem;
 }
 
-header div button img {
+#BannerHeader img {
-	height: 2rem;
+	position: absolute;
+	height: 100svh;
+	width: inherit;
+	top: 0;
+	left: 0;
+	background-size: cover;
+	background-position: center;
+
+	z-index: -1;
 }
 
-header div {
+#BannerHeader h1 {
 	display: flex;
-	justify-content: flex-end;
+	width: fit-content;
-	align-items: center;
+
-	flex-grow: 1;
+	margin-left: 3svw;
+
+	font-size: xx-large;
+	font-weight: normal;
+
+	background-color: white;
+}
+
+#BannerHeader h2 {
+	display: flex;
+	width: fit-content;
+
+	margin-left: 3svw;
+
+	font-size: xx-large;
+	font-weight: normal;
+
+	background-color: white;
 }
 
 /* for dark mode */

src/Header/Header.js

@@ -3,15 +3,26 @@ import lightDark from "./light-dark.webp";
 import { Outlet, Link } from "react-router-dom";
 import "./Header.css";
 import Ender from "../Footer/Ender";
+import { useEffect } from "react";
 
 /**
- * @param {null} null -  Takes in nothing
+ * @param {String} titleText - The text to dispaly in the
+ * @param {String} subtitleText - The text below the banner text you want
+ * @param {String} imgUrl - The url to the image you want as the banner, by default this will be a lorem picsum
  * @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(props) {
+export default function Header({
+	titleText = "UCalgary Baja",
+	subtitleText = "Hello",
+	imgUrl = "https://picsum.photos/200",
+}) {
+	useEffect(() => {
+		HeaderBannerHeight();
+	});
+
 	/**
 	 * @param {null} null -  Takes in nothing
 	 * @returns {CSSStyleRule} CSS - changes page to darkmode
@@ -41,6 +52,31 @@ export default function Header(props) {
 		}
 	});
 
+	/**
+	 * @param {null} nothing - This takes in nothing
+	 * @returns {null} nothing - This returns nothing
+	 * @description This makes it so that the banner will always be 100% of the page at the top
+	 * @author Brock <darkicewolf50@gmail.com>
+	 */
+	const HeaderBannerHeight = () => {
+		if (titleText === "" && imgUrl === "") {
+			// return early to avoid error when no banner is desired
+			return;
+		}
+		const headerTop = document.getElementsByTagName("header")[0];
+		const headerTopStyle = getComputedStyle(headerTop);
+		const headerTopInnerHeight = headerTop.offsetHeight;
+		const headerTopMarginTop = parseFloat(headerTopStyle.marginTop);
+		const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom);
+
+		const headerTopTotalHeight =
+			headerTopInnerHeight + headerTopMarginHeight + headerTopMarginTop;
+
+		const HomeBannerTop = document.getElementById("BannerHeader");
+		// 1svh is to gget the div close enough to the image
+		HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px - 1svh)`;
+	};
+
 	return (
 		<>
 			<header>
@@ -68,9 +104,9 @@ export default function Header(props) {
 						<Link to={"/OurSponsors"}>
 							<li>Sponsors</li>
 						</Link>
-						<Link to={"/OurSponsors"}>
+						{/* <Link to={"/OurSponsors"}>
 							<li>Become a Sponsor</li>
-						</Link>
+						</Link> */}
 						{/* Removed as no longer needed */}
 						{/* <li className="DropDown">
 							{/* this link and li only exits for styling purposes }
@@ -116,8 +152,49 @@ export default function Header(props) {
 					</button>
 				</div>
 			</header>
+			{titleText === "" && imgUrl === "" ? (
+				<></>
+			) : (
+				<div id="BannerHeader">
+					<img
+						id="temp"
+						src={imgUrl}
+					/>
+					<h1>{titleText}</h1>
+					<h2>{subtitleText}</h2>
+				</div>
+			)}
+
 			<Outlet />
 			<Ender />
 		</>
 	);
 }
+
+// used like this
+// import { useState, useEffect } from 'react';
+
+// const ChildPage = () => {
+//   // You can modify the banner's content dynamically here
+//   const [bannerInfo, setBannerInfo] = useState({
+//     imgUrl: 'default-image-url.jpg',
+//     text: 'Default Banner Text',
+//   });
+
+//   useEffect(() => {
+//     // Here, you could fetch data or dynamically set the image/text
+//     setBannerInfo({
+//       imgUrl: 'new-banner-image.jpg',
+//       text: 'New Banner Text for this Page',
+//     });
+//   }, []); // This will set it when the component mounts
+
+//   return (
+//     <div>
+//       <h2>Child Page Content</h2>
+//       {/* Other child content goes here */}
+//     </div>
+//   );
+// };
+
+// export default ChildPage;