feat(header)^: added fade out on scroll down, TODO add updating banner from child component

src/Header/Header.css

@@ -116,6 +116,7 @@ creates dwon downs
 #BannerHeader {
 	height: 100svh;
 	width: 100%;
+	display: flex;
 
 	/* bebug border, use margin to advantage, may cause error later */
 	/* border-bottom: solid 1px black; */
@@ -133,6 +134,11 @@ creates dwon downs
 	z-index: -1;
 }
 
+/* used to postiion title and sub title */
+#BannerHeader div {
+	margin-top: 15%;
+}
+
 #BannerHeader h1 {
 	display: flex;
 	width: fit-content;

src/Header/Header.js

@@ -3,7 +3,7 @@ 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";
+import { useEffect, useState } from "react";
 
 /**
  * @param {String} titleText - The text to dispaly in the
@@ -15,18 +15,20 @@ import { useEffect } from "react";
  * @author Brock <darkicewolf50@gmail.com>
  * @todo add appropriate links
  */
-export default function Header({
+export default function Header() {
-	titleText = "UCalgary Baja",
+	const [bannerInfo, setBannerInfo] = useState({
-	subtitleText = "Hello",
+		titleText: "UCalgary Baja",
-	imgUrl = "https://picsum.photos/200",
+		subtitleText: "Hello",
-	imgAlt = "Lorem picsum",
+		imgUrl: "https://picsum.photos/200",
-}) {
+		imgAlt: "Lorem picsum",
+	});
+
 	useEffect(() => {
 		HeaderBannerHeight();
 	});
 
 	/**
-	 * @param {null} null -  Takes in nothing
+	 * @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>
@@ -40,7 +42,7 @@ export default function Header({
 	};
 
 	/**
-	 * @param {null} null -  Takes in nothing
+	 * @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>
@@ -54,6 +56,16 @@ export default function Header({
 		}
 	});
 
+	/**
+	 * @param {null} nothing - This takes in nothing
+	 * @returns {null} nothing - This returns nothing
+	 * @description This makes it so that the banner fades on scroll down
+	 * @author Brock <darkicewolf50@gmail.com>
+	 */
+	document.addEventListener("scroll", () => {
+		ScrollFadeOut();
+	});
+
 	/**
 	 * @param {null} nothing - This takes in nothing
 	 * @returns {null} nothing - This returns nothing
@@ -61,22 +73,52 @@ export default function Header({
 	 * @author Brock <darkicewolf50@gmail.com>
 	 */
 	const HeaderBannerHeight = () => {
-		if (titleText === "" && imgUrl === "") {
+		if (bannerInfo.titleText === "" && bannerInfo.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);
+		// 2 is used to align bottom of div with img
+		const headerTopMarginTop = parseFloat(headerTopStyle.marginTop) * 2;
 		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)`;
+		HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px)`;
+	};
+
+	/**
+	 * @param {null} nothing - This takes in nothing
+	 * @returns {null} nothing - This returns nothing
+	 * @description This makes it os that the banner fades out on scolling downward
+	 * @author Brock <darkicewolf50@gmail.com>
+	 */
+	const ScrollFadeOut = () => {
+		const bannerImg = document.getElementById("BannerBackgound");
+
+		let opacity = 1;
+
+		let distanceToTop = window.scrollY + bannerImg.getBoundingClientRect().top;
+		let bannerImgHeight = bannerImg.offsetHeight;
+		let scrollTop = document.documentElement.scrollTop;
+
+		if (scrollTop > distanceToTop) {
+			opacity = 1 - (scrollTop - distanceToTop) / bannerImgHeight;
+		}
+
+		if (opacity >= 0) {
+			bannerImg.style.opacity = opacity;
+		}
+	};
+
+	const updateBannerInfo = (newBannerInfo) => {
+		setBannerInfo({ ...newBannerInfo });
 	};
 
 	return (
@@ -154,21 +196,23 @@ export default function Header({
 					</button>
 				</div>
 			</header>
-			{titleText === "" && imgUrl === "" ? (
+			{bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? (
 				<></>
 			) : (
 				<div id="BannerHeader">
 					<img
-						id="temp"
+						id="BannerBackgound"
-						src={imgUrl}
+						src={bannerInfo.imgUrl}
-						alt={imgAlt}
+						alt={bannerInfo.imgAlt}
 					/>
-					<h1>{titleText}</h1>
+					<div>
-					<h2>{subtitleText}</h2>
+						<h1>{bannerInfo.titleText}</h1>
+						<h2>{bannerInfo.subtitleText}</h2>
+					</div>
 				</div>
 			)}
 
-			<Outlet />
+			<Outlet context={{ updateBannerInfo }} />
 			<Ender />
 		</>
 	);

src/MockDB/MockPage.jsx

@@ -0,0 +1,247 @@
+import { useEffect } from "react";
+import { useOutletContext } from "react-router-dom";
+
+/**
+ * @param {String} imgAlt - This needs nothing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Dummy Page used for testing the header
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+export default function MockPage() {
+	const { updateBannerInfo } = useOutletContext();
+
+	var updated = 0;
+
+	const BannerSet = () => {
+		if (updated === 0) {
+			updateBannerInfo({
+				titleText: "UCalgary Baja",
+				subtitleText: "HelloWorld DD",
+				imgUrl: "https://picsum.photos/200",
+				imgAlt: "Lorem S",
+			});
+
+			updated = 1;
+		}
+	};
+
+	useEffect(() => {
+		// Here, you could fetch data or dynamically set the image/text
+		BannerSet();
+	}, []); // This will set it when the component mounts
+	return (
+		<div>
+			<p>
+				Aliquam sed massa rhoncus, tincidunt diam quis, dignissim magna. Sed a
+				nisl sed leo auctor pretium. Class aptent taciti sociosqu ad litora
+				torquent per conubia nostra, per inceptos himenaeos. Integer euismod,
+				arcu id aliquam lacinia, est diam dapibus lectus, non tempor ex mauris
+				et metus. Proin quis sagittis turpis. Ut vel sapien porta, dictum quam
+				ultrices, volutpat urna. Pellentesque nec ullamcorper est. Integer
+				feugiat velit vel sem semper, quis imperdiet odio tristique. Nunc ac
+				elit massa. Sed lobortis feugiat condimentum. Aliquam erat volutpat.
+				Aenean luctus nulla vel velit aliquet hendrerit.
+			</p>
+			<p>
+				Fusce mattis, nulla ut aliquam elementum, neque dui faucibus velit,
+				vitae gravida nisl ante vitae neque. Nulla pulvinar ut ipsum ut porta.
+				Vivamus porttitor elit id turpis pretium, convallis malesuada diam
+				elementum. Suspendisse potenti. Aenean ac euismod urna, vel lobortis
+				nisl. In laoreet metus a semper dignissim. Curabitur eget felis in
+				libero facilisis auctor. Nulla vel viverra turpis, ac aliquet magna.
+				Praesent ultricies turpis nec odio fermentum, sed venenatis enim
+				sodales.
+			</p>
+			<p>
+				Sed consectetur vitae nunc sit amet ullamcorper. Fusce id cursus elit,
+				ac pulvinar massa. Orci varius natoque penatibus et magnis dis
+				parturient montes, nascetur ridiculus mus. Morbi ultricies fermentum
+				fringilla. Maecenas auctor commodo lobortis. Morbi sed ligula eget metus
+				condimentum euismod. Nullam elementum ullamcorper neque, at volutpat
+				eros suscipit sed. Sed metus dui, semper in scelerisque ut, vulputate
+				sed nisi. Fusce rutrum, risus quis gravida aliquam, purus purus
+				efficitur nunc, eu ullamcorper purus nisl id mi.
+			</p>
+			<p>
+				Praesent suscipit orci a mollis finibus. Phasellus tempor elit sit amet
+				diam finibus, id porttitor risus vestibulum. Etiam consequat odio sed mi
+				malesuada tincidunt. Aliquam euismod ultrices velit, quis suscipit massa
+				hendrerit et. Duis ornare maximus ex, eu consequat leo iaculis quis. Sed
+				venenatis leo augue, et dictum mi laoreet sed. Quisque tempus laoreet
+				accumsan.
+			</p>
+			<p>
+				Aliquam in blandit nunc. Suspendisse massa lorem, congue ut dui at,
+				aliquet rutrum lectus. Orci varius natoque penatibus et magnis dis
+				parturient montes, nascetur ridiculus mus. Integer eget porta mauris.
+				Maecenas erat erat, rutrum nec lacus sit amet, vestibulum finibus felis.
+				Cras pretium viverra ultrices. Nam scelerisque vulputate massa, eget
+				tristique dolor gravida eu. Maecenas libero nibh, molestie et diam
+				vitae, rutrum luctus elit. Aenean mattis interdum pretium. Aliquam
+				vestibulum nunc nisi, quis porttitor sem ornare tincidunt.
+			</p>
+			<p>
+				Integer non lacus at purus vulputate semper et gravida libero. Etiam
+				volutpat odio ac odio tincidunt lacinia. Aenean finibus mi nec dignissim
+				dapibus. Sed non enim vitae leo aliquet fringilla eu sit amet risus.
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut nisi
+				scelerisque mauris viverra malesuada id sed mauris. Nunc quis lobortis
+				felis. Aliquam erat volutpat. Pellentesque fermentum at lorem quis
+				vehicula. Donec blandit purus at pretium ullamcorper. Quisque sit amet
+				enim sodales, pretium diam quis, elementum ex. Nulla eu faucibus dui, et
+				rhoncus libero. Nulla facilisi.
+			</p>
+			<p>
+				Curabitur gravida magna ac diam dapibus mattis. Aenean non erat non nisi
+				porta hendrerit. Duis dictum lectus lorem, vel pellentesque risus
+				interdum ac. Curabitur eu vehicula purus. Vivamus auctor ipsum
+				convallis, vestibulum lectus sed, ullamcorper sem. Duis sit amet elit
+				congue, maximus elit et, lacinia nisi. Aenean at ante dolor. Sed ipsum
+				quam, venenatis id diam eu, hendrerit bibendum dui. Duis nisl felis,
+				lobortis ultrices tellus sed, pharetra semper justo. Maecenas tempus
+				tincidunt augue, sit amet hendrerit felis condimentum eu. Nunc dignissim
+				aliquam metus, vel lobortis risus interdum nec. Orci varius natoque
+				penatibus et magnis dis parturient montes, nascetur ridiculus mus. In
+				rhoncus sem quis magna gravida, posuere convallis nisl gravida. Praesent
+				non sem et est porttitor dignissim.
+			</p>
+			<p>
+				Nam feugiat aliquet facilisis. Praesent hendrerit vulputate justo, eget
+				consectetur nibh elementum a. In lobortis lobortis ex, vitae dictum
+				dolor interdum ut. Vestibulum sed ipsum ac nunc imperdiet interdum et
+				nec sapien. Duis nec gravida orci. Curabitur quis tincidunt nulla.
+				Mauris efficitur nulla id eros feugiat, vitae convallis est dapibus.
+				Maecenas elementum quam sed mattis aliquam. Curabitur ipsum felis,
+				dictum in velit quis, pretium vestibulum augue. Ut eu finibus felis.
+				Integer nec enim nec sapien vulputate pharetra.
+			</p>
+			<p>
+				Quisque at dapibus lacus. Nam et metus leo. Vivamus condimentum
+				pellentesque mauris, nec blandit neque. Duis eu risus erat. Cras velit
+				turpis, aliquet sed nibh at, sagittis venenatis nisl. Aenean erat eros,
+				lobortis a nisl a, auctor pellentesque eros. Proin nec auctor nunc.
+				Integer tristique metus et elit blandit, id suscipit nulla ornare. Donec
+				ac sem purus. Sed mollis arcu sem, quis condimentum lacus lobortis id.
+				Proin tincidunt nibh a varius ultricies. In finibus libero quis enim
+				ultrices tincidunt. Nam leo arcu, facilisis eget blandit sed,
+				consectetur ac arcu. Vestibulum ac eros erat. Nullam eget aliquam est,
+				eget commodo libero.
+			</p>
+			<p>
+				Nulla et urna ligula. Nullam suscipit ultrices dolor, non feugiat est
+				eleifend in. Sed feugiat quis nisi iaculis viverra. Aliquam egestas
+				risus sit amet tortor lobortis, quis efficitur ante hendrerit. Donec
+				sagittis orci turpis, in commodo nunc vehicula eu. Quisque quis quam in
+				ligula tincidunt suscipit a at lacus. Etiam eu lectus volutpat, bibendum
+				ante et, ullamcorper ipsum. Maecenas porttitor accumsan odio eu
+				tincidunt. Aliquam erat volutpat. Mauris sit amet odio sed tortor
+				ultricies congue a eget sem. Vestibulum molestie gravida velit, at
+				auctor sem commodo a.
+			</p>
+			<p>
+				Aliquam fermentum leo at ornare auctor. Vivamus ac faucibus tortor.
+				Nullam pulvinar velit maximus, ornare mauris vitae, hendrerit ante.
+				Praesent et semper metus. Ut faucibus aliquam justo non placerat. Sed
+				quis scelerisque tellus. In vel hendrerit velit. Fusce et urna
+				ultricies, bibendum ligula ac, volutpat erat. Sed quis luctus dolor,
+				vitae iaculis mi. Pellentesque in tellus eu quam consequat venenatis.
+				Etiam a tempus nibh. Fusce eu mi sodales dui finibus tempor blandit
+				pretium metus. Curabitur elit magna, vulputate quis posuere vehicula,
+				faucibus eu ex.
+			</p>
+			<p>
+				Phasellus quis quam nec neque laoreet luctus id vel tortor. Integer
+				dictum euismod quam non eleifend. Vestibulum sit amet velit vel dui
+				eleifend euismod. In hac habitasse platea dictumst. Cras congue nulla et
+				velit tincidunt vestibulum. Maecenas ac imperdiet augue. Donec venenatis
+				enim risus, et rhoncus mauris efficitur vitae. Phasellus vitae leo
+				semper nunc volutpat suscipit non sit amet nulla. Nullam pharetra neque
+				turpis, id facilisis sapien ultricies vitae. Ut ac elit at arcu laoreet
+				fringilla ut tincidunt urna. Proin nibh lacus, porttitor eget nisi
+				congue, rhoncus rhoncus eros. Nunc finibus neque nec erat fringilla
+				eleifend.
+			</p>
+			<p>
+				Cras congue purus in magna posuere, vel varius leo facilisis. Donec a ex
+				volutpat, accumsan odio id, gravida lorem. Vestibulum mauris libero,
+				venenatis nec velit non, consectetur pretium nulla. Vestibulum ante
+				ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+				Fusce felis velit, bibendum quis pretium quis, sollicitudin nec magna.
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae magna
+				ligula. Donec viverra aliquam lectus, vel mollis metus egestas sit amet.
+				Nam elit velit, convallis et turpis quis, tincidunt euismod elit.
+				Quisque pretium ultrices leo id convallis. Nulla sed dui at nisl
+				imperdiet rhoncus ut sit amet ante. Fusce nisl enim, ornare non tortor
+				eu, interdum gravida lacus.
+			</p>
+			<p>
+				Donec eu aliquam nunc, eget facilisis risus. Maecenas at vehicula odio.
+				Donec pulvinar at nisl in sollicitudin. Donec tincidunt lacus at nisl
+				consequat tempus. Praesent sit amet accumsan dolor, a tristique erat.
+				Fusce at molestie diam. Donec quis nulla urna. Aenean laoreet dolor et
+				neque rhoncus blandit. Duis id mi id mauris rutrum facilisis.
+				Suspendisse potenti. Aliquam sodales quam nec euismod ornare. Nullam
+				laoreet ultricies pretium. Pellentesque eu turpis sagittis, dictum nunc
+				sit amet, dapibus mauris. Quisque congue sit amet libero a rhoncus.
+			</p>
+			<p>
+				Cras non ultricies arcu. Sed dapibus eros ut dapibus elementum.
+				Suspendisse lectus lorem, vestibulum sit amet tincidunt a, mattis a
+				eros. Mauris ut urna sed turpis fermentum maximus non at justo. Ut ut
+				dictum tortor. In egestas sem eget dui efficitur pretium. Mauris vitae
+				massa eu tortor semper finibus.
+			</p>
+			<p>
+				Sed tincidunt, velit ac dictum dictum, dui odio elementum mauris, quis
+				tristique lacus nisl congue nulla. Nunc volutpat nisi ut tortor
+				ultrices, non lobortis lacus gravida. Aliquam tempus dolor at felis
+				dictum, a molestie lacus sagittis. Duis nibh sem, tincidunt eget feugiat
+				in, dapibus ut lacus. Aliquam sed tellus nec lacus ultricies placerat in
+				ut lectus. Sed nec convallis ante. Ut ut lobortis sem. Aliquam ornare
+				rhoncus lacus in dapibus. Donec vel diam ante. Maecenas egestas
+				scelerisque nisl ac scelerisque. Cras sapien nulla, porttitor a varius
+				at, elementum ac metus. Vivamus at ligula urna.
+			</p>
+			<p>
+				Curabitur a semper quam. Sed a fermentum velit. Aenean magna mi,
+				pellentesque et fermentum vitae, pharetra dapibus libero. Vivamus
+				porttitor ultrices dignissim. Donec sodales, purus sed sagittis
+				facilisis, purus ex suscipit libero, eu consectetur dui velit ultrices
+				erat. Etiam eu pellentesque est. Pellentesque vehicula dui ac mauris
+				egestas pharetra. Maecenas eget tristique sem. Nullam tincidunt lectus
+				sit amet odio ornare, vitae pretium nisi feugiat.
+			</p>
+			<p>
+				Pellentesque fringilla ante et metus sollicitudin, vel blandit nisi
+				sagittis. In semper nisi nec sapien congue eleifend. Nam faucibus elit
+				leo, quis dignissim ex sagittis nec. Aliquam in magna commodo massa
+				sollicitudin ornare quis nec purus. Maecenas placerat quis lacus non
+				luctus. Vestibulum ut tellus luctus, congue turpis sed, elementum dolor.
+				Nam nec nunc congue magna ornare congue. Aliquam dignissim finibus dui
+				eu semper. Sed viverra massa sed ipsum dictum, at blandit lorem aliquet.
+				Proin semper, tortor a malesuada finibus, tellus lacus porttitor magna,
+				eu porttitor erat turpis a quam. Nam blandit nisi vitae justo tincidunt,
+				sit amet suscipit tortor ultrices.
+			</p>
+			<p>
+				Nulla facilisi. Etiam eleifend varius nisl a mollis. In non laoreet
+				tellus, sed laoreet purus. Etiam sed erat vitae dui auctor fringilla.
+				Phasellus pretium purus a urna scelerisque dapibus. Phasellus eget enim
+				enim. Fusce ac fringilla nunc. Aliquam tristique mattis diam in
+				placerat. Vestibulum dolor velit, sagittis et dolor non, tempus
+				consectetur justo.
+			</p>
+			<p>
+				Vivamus consequat sapien enim, ac vulputate mi viverra sed. Donec in
+				nunc ac risus tempor mollis. Cras turpis sem, lacinia at turpis sed,
+				malesuada auctor mi. Etiam sed elementum erat, non tincidunt urna.
+				Curabitur congue dolor nisi, at facilisis orci facilisis nec. Etiam
+				cursus, tellus vel varius fermentum, velit ex blandit mauris, id
+				vulputate augue eros at orci. Nullam eu eleifend ipsum. Etiam sed velit
+				lorem. Duis turpis nulla, rhoncus sit amet arcu egestas, facilisis
+				imperdiet dui. Suspendisse facilisis lobortis elit, ut facilisis eros
+				laoreet non. Vestibulum at leo at nunc euismod condimentum.
+			</p>
+		</div>
+	);
+}

src/index.js

@@ -10,6 +10,7 @@ import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinThe
 import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
 import Gallery from "./Gallery/Gallery";
 import "./index.css";
+import MockPage from "./MockDB/MockPage";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -35,6 +36,9 @@ root.render(
 					<Route
 						path="/Gallery"
 						element={<Gallery />}></Route>
+					<Route
+						path="/MockPage"
+						element={<MockPage />}></Route>
 				</Route>
 			</Routes>
 		</BrowserRouter>