Merge pull request #2 from UofCBaja/header to dev

Header Merge into dev

src/Header/DropdownMenu.js

@@ -1,20 +1,24 @@
-// import OpenPage from "./OpenPage";
-import { useNavigate } from "react-router-dom";
+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 = () => {
-  const navigate = useNavigate();
-
-  const OpenPage = (arg) => {    
-      navigate(arg);
-      console.log(arg);
-  };
-
-  return (
-    <div>
-      <button type = "button" onClick = {() => OpenPage('/JoinTheClub')}>Join the Club</button>
-      <button type = "button" onClick = {() => OpenPage('/UpcomingEvents')}>Upcoming Events</button>
-    </div>
-  );
+	return (
+		<div>
+			<OpenPageButton
+				pageToGoTo={"/JoinTheClub"}
+				textOnButton={"Join the Club"}
+			/>
+			<OpenPageButton
+				pageToGoTo={"/UpcomingEvents"}
+				textOnButton={"Upcoming Events"}
+			/>
+		</div>
+	);
 };
 
-export default DropdownMenu;
+export default DropdownMenu;

src/Header/Header.css

@@ -0,0 +1,28 @@
+header {
+	display: flex;
+	flex-direction: column;
+	margin: 1%;
+	margin-top: 0%;
+}
+
+figure {
+	margin: 0px;
+	height: 10%;
+}
+
+#logo {
+	height: 5rem;
+	background-color: white;
+}
+
+/* not sure what these two are for */
+#title {
+	background-color: blueviolet;
+}
+.banner {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	background-color: aqua;
+}

src/Header/Header.js

@@ -1,23 +1,35 @@
 import logo from "./logo.png";
 import DropdownMenu from "./DropdownMenu";
-// import OpenPage from "./OpenPage";
+import OpenPageButton from "./OpenPageButton";
 import { useNavigate, Outlet } from "react-router-dom";
 import { useState } from "react";
 import "./Header.css";
 
-export default function Header() {
+/**
+ * @param {null} null -  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>
+ */
+const Header = () => {
 	const [isDropdownVisible, setDropdownVisible] = useState(false);
 	const navigate = useNavigate();
 
-	const OpenPage = (arg) => {
+	/**
+	 * @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
+	 * @author Brock <darkicewolf50@gmail.com>
+	 */
+	const LinkTo = (arg) => {
 		navigate(arg);
-		console.log(arg);
 	};
 
+	//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);
 	};
@@ -25,51 +37,52 @@ export default function Header() {
 	return (
 		<>
 			<header>
-				<div>
+				<figure>
 					<img
-						style={{ background: "gray" }}
-						onClick={() => OpenPage("/")}
+						id="logo"
+						onClick={() => LinkTo("/")}
 						src={logo}
-						alt="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"}
+					/>
+					<OpenPageButton
+						pageToGoTo={"/BecomeASponsor"}
+						textOnButton={"Become a Sponsor"}
 					/>
-					<p>Schulich Offroad</p>
-				</div>
-				<div>
-					<button
-						type="button"
-						onClick={() => OpenPage("/")}>
-						About Us
-					</button>
-					<button
-						type="button"
-						onClick={() => OpenPage("/Teams")}>
-						Teams
-					</button>
-					<button
-						type="button"
-						onClick={() => OpenPage("/OurSponsors")}>
-						Our Sponsors
-					</button>
-					<button
-						type="button"
-						onClick={() => OpenPage("/BecomeASponsor")}>
-						Become a Sponsor
-					</button>
 					<div
 						onMouseEnter={handleMouseEnter}
 						onMouseLeave={handleMouseLeave}
 						style={{ background: "red" }}>
-						<button type="button">Club Membership & Upcoming Events</button>
+						{/* dropdown menu is only visible when a mouse enters the area of the button below */}
+						<button type="button">Club Membership & Upcoming Events</button>{" "}
+						{/*this button does nothing yet*/}
 						{isDropdownVisible && <DropdownMenu />}
 					</div>
-					<button
-						type="button"
-						onClick={() => OpenPage("/Gallery")}>
-						Gallery
-					</button>
-				</div>
+					<OpenPageButton
+						pageToGoTo={"/Gallery"}
+						textOnButton={"Gallery"}
+					/>
+				</nav>
 			</header>
 			<Outlet />
 		</>
 	);
-}
+};
+
+export default Header;

src/Header/OpenPageButton.css

@@ -0,0 +1,3 @@
+#navigateButton {
+	text-decoration: none;
+}

src/Header/OpenPageButton.js

@@ -0,0 +1,27 @@
+import { useNavigate } from "react-router-dom";
+import "./OpenPageButton.css";
+
+/**
+ * @param {String} pageToGoTo -  The page that the button goes to
+ * @param {String} textOnButton - The Text tht will be on the button
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Button Template that moves you to the
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo refactor so that name is OpenPageButton, add css to the button
+ */
+const OpenPageButton = ({ pageToGoTo, textOnButton }) => {
+	const navigate = useNavigate();
+	const navigateTo = (param) => {
+		navigate(param);
+	};
+
+	return (
+		<button
+			id="navigateButton"
+			onClick={() => navigateTo(pageToGoTo)}>
+			{textOnButton}
+		</button>
+	);
+};
+
+export default OpenPageButton;