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

init footer

Browse Source
This commit is contained in:
darkicewolf50 2024-03-09 16:00:56 -07:00
parent a8e32a97e6
commit c4ba085c3b
3 changed files with 127 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/Footer/Ender.css Normal file
View File

@ -0,0 +1,33 @@
#ender {
display: flex;
flex-direction: column;
padding-top: 10px;
padding-bottom: 10px;
justify-content: center;
background-color: lightgrey;
}
#pointerCursor {
cursor: pointer;
}
#ender div {
display: flex;
flex-direction: row;
justify-content: center;
}
#ender p {
padding-left: 2%;
}
#ender .hidden {
display: flex;
flex-direction: row;
justify-content: center;
display: none;
}
#ender .hidden li {
list-style-type: none;
padding-right: 2%;
}

28
src/Footer/Ender.js Normal file
View File

@ -0,0 +1,28 @@
import "./Ender.css";
/**
* @param {null} null - requires onthing
* @returns {JSX.Element} Page - HTML tags and JS functionality
* @description The Footer of the page
* @author Brock <darkicewolf50@gmail.com>
* @todo add who helped developed the site and finalize css
*/
const Ender = () => {
return (
<footer id="ender">
<div>
<p>© 2023 by Schulich Off-Road </p>
<p
onClick={() => window.open("https://www.morphgenix.com/", "_blank")}
id="pointerCursor">
Powered by: Morphgenix
</p>
</div>
<ul className="hidden">
<li>Developed by:</li>
<li>Brock</li>
</ul>
</footer>
);
};
export default Ender;

106
src/Header/Header.js
View File

@ -1,52 +1,78 @@
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 } from "react-router-dom";
import { useState } from "react"; import { useState } from "react";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import "./Header.css"; import "./Header.css";
import Ender from "../Footer/Ender";
export default function Header() { export default function Header() {
const [isDropdownVisible, setDropdownVisible] = useState(false); const [isDropdownVisible, setDropdownVisible] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const OpenPage = (arg) => { const OpenPage = (arg) => {
navigate(arg); navigate(arg);
console.log(arg); console.log(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={() => OpenPage("/")}
<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 <div>
onMouseEnter={handleMouseEnter} <button
onMouseLeave={handleMouseLeave} type="button"
style={{background: "red"}} onClick={() => OpenPage("/")}>
> About Us
<button type = "button">Club Membership & Upcoming Events</button> </button>
{isDropdownVisible && <DropdownMenu />} <button
</div> type="button"
<button type = "button" onClick = {() => OpenPage('/Gallery')}>Gallery</button> onClick={() => OpenPage("/Teams")}>
</div> Teams
</header> </button>
<Outlet /> <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>
{isDropdownVisible && <DropdownMenu />}
</div>
<button
type="button"
onClick={() => OpenPage("/Gallery")}>
Gallery
</button>
</div>
</header>
<Outlet />
<Ender />
</>
);
}