Merge pull request #7 from UofCBaja/header to dev

Header merged

src/Header/DropdownMenu.js

@@ -1,24 +0,0 @@
-import OpenPageButton from "./OpenPageButton";
-
-/**
- * @param {null} null -  Takes in nothing
- * @returns {JSX.Element} JSX - HTML tags and JS functionality
- * @description Drop down menu elements
- * @author Brock <darkicewolf50@gmail.com>
- */
-const DropdownMenu = () => {
-	return (
-		<div>
-			<OpenPageButton
-				pageToGoTo={"/JoinTheClub"}
-				textOnButton={"Join the Club"}
-			/>
-			<OpenPageButton
-				pageToGoTo={"/UpcomingEvents"}
-				textOnButton={"Upcoming Events"}
-			/>
-		</div>
-	);
-};
-
-export default DropdownMenu;

src/Header/Header.css

@@ -5,6 +5,12 @@ header {
 	margin-top: 0%;
 }
 
+header a {
+	text-decoration: none;
+	color: inherit;
+	cursor: pointer;
+}
+
 figure {
 	margin: 0px;
 	height: 10%;
@@ -19,14 +25,79 @@ header figure {
 	background-color: white;
 }
 
-/* not sure what these two are for */
-#title {
-	background-color: blueviolet;
+nav a {
+	text-decoration: none;
+	color: inherit;
+	cursor: pointer;
 }
-.banner {
+
+nav a li {
+	background-color: none;
+	padding: 0.5rem;
+	border: solid 1px gray;
+}
+
+nav a li:hover {
+	background-color: gray;
+}
+
+nav ul {
 	display: flex;
 	flex-direction: row;
-	align-items: center;
-	justify-content: flex-start;
-	background-color: aqua;
+	list-style: none;
+	margin: 0px;
+	padding: 0px;
+}
+
+.Hide {
+	display: none;
+}
+
+.DropDown {
+	cursor: default;
+	position: relative;
+}
+
+/* makes dropdown visible */
+.DropDown:hover .Hide {
+	display: block;
+	position: absolute;
+	width: 100%;
+	text-align: center;
+}
+
+header div {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+header div button {
+	border: none;
+	cursor: pointer;
+	height: 4rem;
+	width: 4rem;
+	align-items: center;
+	background-color: inherit;
+	border: solid 2px gray;
+	border-radius: 1rem;
+}
+
+header div button img {
+	width: 100%;
+}
+
+/* for dark mode */
+
+.darkmode {
+	filter: invert(95%) hue-rotate(180deg);
+	background-color: white;
+}
+
+#root.darkmode #logo.logoAfterDark {
+	filter: hue-rotate(180deg);
+}
+
+#root.darkmode #darkModeToggle {
+	filter: hue-rotate(180deg);
 }

src/Header/Header.js

@@ -1,8 +1,6 @@
 import logo from "./logo.webp";
-import DropdownMenu from "./DropdownMenu";
-import OpenPageButton from "./OpenPageButton";
-import { useNavigate, Outlet } from "react-router-dom";
-import { useState } from "react";
+import lightDark from "./light-dark.webp";
+import { Outlet, Link } from "react-router-dom";
 import "./Header.css";
 import Ender from "../Footer/Ender";
 
@@ -11,72 +9,108 @@ 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)
  */
 const Header = () => {
-	const [isDropdownVisible, setDropdownVisible] = useState(false);
-	const navigate = useNavigate();
-
 	/**
-	 * @param {String} arg -  The page that the button goes to
-	 * @returns {JSX.Element} JSX - HTML tags and JS functionality
-	 * @description Function that move you to the specified place
+	 * @param {null} null -  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 LinkTo = (arg) => {
-		navigate(arg);
+	const switchDarkMode = () => {
+		const body = document.getElementById("root");
+		const logoCss = document.getElementById("logo");
+
+		body.classList.toggle("darkmode");
+		logoCss.classList.toggle("logoAfterDark");
 	};
 
-	//makes the drop down menu visible when the mouse enters the Club Membership & Upcoming events button area
-	const handleMouseEnter = () => {
-		setDropdownVisible(true);
-	};
-	//makes the drop down menu invisible when the mouse leaves the Club Membership & Upcoming events button area
-	const handleMouseLeave = () => {
-		setDropdownVisible(false);
-	};
+	/**
+	 * @param {null} null -  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>
-				<figure onClick={() => LinkTo("/")}>
-					<img
-						id="logo"
-						src={logo}
-						alt="Schulich Off-Road's logo"
-					/>
-					<figcaption>
-						<h2>Schulich Offroad</h2>
-					</figcaption>
-				</figure>
-				<nav>
-					<OpenPageButton
-						pageToGoTo={"/"}
-						textOnButton={"About Us"}
-					/>
-					<OpenPageButton
-						pageToGoTo={"/Teams"}
-						textOnButton={"Teams"}
-					/>
-					<OpenPageButton
-						pageToGoTo={"/OurSponsors"}
-						textOnButton={"Our Sponsors"}
-					/>
-					<div
-						onMouseEnter={handleMouseEnter}
-						onMouseLeave={handleMouseLeave}
-						style={{ background: "red" }}>
-						{/* dropdown menu is only visible when a mouse enters the area of the button below */}
-						<OpenPageButton
-							pageToGoTo={"/UpcomingEvents"}
-							textOnButton={"Club Membership & Upcoming Events"}
+				<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"
 						/>
-						{/*this button does nothing yet*/}
-						{isDropdownVisible && <DropdownMenu />}
-					</div>
-					<OpenPageButton
-						pageToGoTo={"/Gallery"}
-						textOnButton={"Gallery"}
-					/>
+					</button>
+				</div>
+				<nav>
+					<ul>
+						<Link to={"/"}>
+							<li>About Us</li>
+						</Link>
+						<Link to={"/Teams"}>
+							<li>Teams</li>
+						</Link>
+						<Link to={"/OurSponsors"}>
+							<li>Our Sponsors</li>
+						</Link>
+						<Link to={"/OurSponsors"}>
+							<li>Become a Sponsor</li>
+						</Link>
+						<li className="DropDown">
+							{/* this link and li only exits for styling purposes */}
+							<Link>
+								<li>Club Membership & Upcoming Events</li>
+							</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>
+								<li>More</li>
+							</Link>
+							<ul className="Hide">
+								<Link>
+									<li>Gallery</li>
+								</Link>
+								<Link>
+									<li>Roster</li>
+								</Link>
+							</ul>
+						</li>
+					</ul>
 				</nav>
 			</header>
 			<Outlet />

src/index.css

@@ -1,13 +1,20 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+		monospace;
+}
+
+/* for dark mode */
+#root.darkmode img,
+#root.darkmode video,
+#root.darkmode iframe {
+	filter: invert(95%) hue-rotate(180deg);
 }