Ucalgary_Baja/BajaUofCWebsite
5
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-08-05 09:50:55 -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
Download Patch File Download Diff File Expand all files Collapse all files

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 OpenPage from "./OpenPage";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { Outlet } from "react-router-dom";
import "./Header.css";
import Ender from "../Footer/Ender";
export default function Header() {
const [isDropdownVisible, setDropdownVisible] = useState(false);
const navigate = useNavigate();
const [isDropdownVisible, setDropdownVisible] = useState(false);
const navigate = useNavigate();
const OpenPage = (arg) => {
navigate(arg);
console.log(arg);
};
const OpenPage = (arg) => {
navigate(arg);
console.log(arg);
};
const handleMouseEnter = () => {
setDropdownVisible(true);
};
const handleMouseEnter = () => {
setDropdownVisible(true);
};
const handleMouseLeave = () => {
setDropdownVisible(false);
};
const handleMouseLeave = () => {
setDropdownVisible(false);
};
return (
<>
<header>
<div>
<img style={{background: "gray"}} onClick = {() => OpenPage('/')} src={logo} alt="logo" />
<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>
{isDropdownVisible && <DropdownMenu />}
</div>
<button type = "button" onClick = {() => OpenPage('/Gallery')}>Gallery</button>
</div>
</header>
<Outlet />
</>
);
};
return (
<>
<header>
<div>
<img
style={{ background: "gray" }}
onClick={() => OpenPage("/")}
src={logo}
alt="logo"
/>
<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>
{isDropdownVisible && <DropdownMenu />}
</div>
<button
type="button"
onClick={() => OpenPage("/Gallery")}>
Gallery
</button>
</div>
</header>
<Outlet />
<Ender />
</>
);
}