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

refactored page to use nav tag and new open page button

Browse Source
This commit is contained in:
darkicewolf50 2024-03-13 13:46:04 -06:00
parent a8e32a97e6
commit 58e120f910
3 changed files with 117 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/Header/DropdownMenu.js
View File

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

119
src/Header/Header.js
View File

@ -1,52 +1,83 @@
import logo from './logo.png'; import logo from "./logo.png";
import DropdownMenu from "./DropdownMenu"; import DropdownMenu from "./DropdownMenu";
// import OpenPage from "./OpenPage"; import OpenPage from "./OpenPage";
import { useNavigate } from "react-router-dom"; import { useNavigate, Outlet } from "react-router-dom";
import { useState } from "react"; import { useState } from "react";
import { Outlet } from "react-router-dom";
import "./Header.css"; import "./Header.css";
export default function Header() { /**
const [isDropdownVisible, setDropdownVisible] = useState(false); * @param {null} null - Takes in nothing
const navigate = useNavigate(); * @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) => { /**
navigate(arg); * @param {String} arg - The page that the button goes to
console.log(arg); * @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);
};
const handleMouseEnter = () => { const handleMouseEnter = () => {
setDropdownVisible(true); setDropdownVisible(true);
}; };
const handleMouseLeave = () => { const handleMouseLeave = () => {
setDropdownVisible(false); setDropdownVisible(false);
}; };
return ( return (
<> <>
<header> <header>
<div> <div>
<img style={{background: "gray"}} onClick = {() => OpenPage('/')} src={logo} alt="logo" /> <img
<p>Schulich Offroad</p> style={{ background: "gray" }}
</div> onClick={() => LinkTo("/")}
<div> src={logo}
<button type = "button" onClick = {() => OpenPage('/')}>About Us</button> alt="logo"
<button type = "button" onClick = {() => OpenPage('/Teams')}>Teams</button> />
<button type = "button" onClick = {() => OpenPage('/OurSponsors')}>Our Sponsors</button> <p>Schulich Offroad</p>
<button type = "button" onClick = {() => OpenPage('/BecomeASponsor')}>Become a Sponsor</button> </div>
<div <nav>
onMouseEnter={handleMouseEnter} <OpenPage
onMouseLeave={handleMouseLeave} pageToGoTo={"/"}
style={{background: "red"}} textOnButton={"About Us"}
> />
<button type = "button">Club Membership & Upcoming Events</button> <OpenPage
{isDropdownVisible && <DropdownMenu />} pageToGoTo={"/Teams"}
</div> textOnButton={"Teams"}
<button type = "button" onClick = {() => OpenPage('/Gallery')}>Gallery</button> />
</div> <OpenPage
</header> pageToGoTo={"/OurSponsors"}
<Outlet /> textOnButton={"Our Sponsors"}
</> />
); <OpenPage
}; pageToGoTo={"/BecomeASponsor"}
textOnButton={"Become a Sponsor"}
/>
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
style={{ background: "red" }}>
<button type="button">Club Membership & Upcoming Events</button>
{isDropdownVisible && <DropdownMenu />}
</div>
<OpenPage
pageToGoTo={"/Gallery"}
textOnButton={"Gallery"}
/>
</nav>
</header>
<Outlet />
</>
);
};
export default Header;

27
src/Header/OpenPage.js
View File

@ -1,9 +1,26 @@
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const OpenPage = (arg) => { /**
const navigate = useNavigate(); * @param {String} pageToGoTo - The page that the button goes to
navigate(arg); * @param {String} textOnButton - The Text tht will be on the button
console.log(arg); * @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; export default OpenPage;