Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-15 13:24:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

changed name of OpenPage to be more clear added need for css

Browse Source
This commit is contained in:
darkicewolf50 2024-03-13 14:11:42 -06:00
parent 81eadbda2f
commit acb4728b1d
3 changed files with 9 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Header/DropdownMenu.js
View File

@ -1,4 +1,4 @@
import OpenPage from "./OpenPage"; import OpenPageButton from "./OpenPageButton";
/** /**
* @param {null} null - Takes in nothing * @param {null} null - Takes in nothing
@ -9,11 +9,11 @@ import OpenPage from "./OpenPage";
const DropdownMenu = () => { const DropdownMenu = () => {
return ( return (
<div> <div>
<OpenPage <OpenPageButton
pageToGoTo={"/JoinTheClub"} pageToGoTo={"/JoinTheClub"}
textOnButton={"Join the Club"} textOnButton={"Join the Club"}
/> />
<OpenPage <OpenPageButton
pageToGoTo={"/UpcomingEvents"} pageToGoTo={"/UpcomingEvents"}
textOnButton={"Upcoming Events"} textOnButton={"Upcoming Events"}
/> />

12
src/Header/Header.js
View File

@ -1,6 +1,6 @@
import logo from "./logo.png"; import logo from "./logo.png";
import DropdownMenu from "./DropdownMenu"; import DropdownMenu from "./DropdownMenu";
import OpenPage from "./OpenPage"; import OpenPageButton from "./OpenPageButton";
import { useNavigate, Outlet } from "react-router-dom"; import { useNavigate, Outlet } from "react-router-dom";
import { useState } from "react"; import { useState } from "react";
import "./Header.css"; import "./Header.css";
@ -46,19 +46,19 @@ const Header = () => {
<h2>Schulich Offroad</h2> <h2>Schulich Offroad</h2>
</div> </div>
<nav> <nav>
<OpenPage <OpenPageButton
pageToGoTo={"/"} pageToGoTo={"/"}
textOnButton={"About Us"} textOnButton={"About Us"}
/> />
<OpenPage <OpenPageButton
pageToGoTo={"/Teams"} pageToGoTo={"/Teams"}
textOnButton={"Teams"} textOnButton={"Teams"}
/> />
<OpenPage <OpenPageButton
pageToGoTo={"/OurSponsors"} pageToGoTo={"/OurSponsors"}
textOnButton={"Our Sponsors"} textOnButton={"Our Sponsors"}
/> />
<OpenPage <OpenPageButton
pageToGoTo={"/BecomeASponsor"} pageToGoTo={"/BecomeASponsor"}
textOnButton={"Become a Sponsor"} textOnButton={"Become a Sponsor"}
/> />
@ -69,7 +69,7 @@ const Header = () => {
<button type="button">Club Membership & Upcoming Events</button> <button type="button">Club Membership & Upcoming Events</button>
{isDropdownVisible && <DropdownMenu />} {isDropdownVisible && <DropdownMenu />}
</div> </div>
<OpenPage <OpenPageButton
pageToGoTo={"/Gallery"} pageToGoTo={"/Gallery"}
textOnButton={"Gallery"} textOnButton={"Gallery"}
/> />

26
src/Header/OpenPage.js
View File

@ -1,26 +0,0 @@
import { useNavigate } from "react-router-dom";
/**
* @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
*/
const OpenPage = ({ pageToGoTo, textOnButton }) => {
const navigate = useNavigate();
const navigateTo = (param) => {
navigate(param);
};
return (
<button
id="navigateButton"
onClick={() => navigateTo(pageToGoTo)}>
{textOnButton}
</button>
);
};
export default OpenPage;