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

added header: css started to make dropdowns better, now using Link

Browse Source
This commit is contained in:
darkicewolf50 2024-03-26 15:23:43 -06:00
parent 10fc1f535b
commit 9280dcee83
2 changed files with 99 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/Header/Header.css
View File

@ -5,6 +5,12 @@ header {
margin-top: 0%; margin-top: 0%;
} }
header a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
figure { figure {
margin: 0px; margin: 0px;
height: 10%; height: 10%;
@ -15,14 +21,41 @@ figure {
background-color: white; background-color: white;
} }
/* not sure what these two are for */ nav a {
#title { text-decoration: none;
background-color: blueviolet; color: inherit;
cursor: pointer;
} }
.banner {
nav a li {
background-color: none;
padding: 1rem;
padding-top: 0px;
}
nav ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; list-style: none;
justify-content: flex-start; margin: 0px;
background-color: aqua; padding: 0px;
} }
.Hide {
display: none;
}
.DropDown {
cursor: default;
position: relative;
}
/* makes dropdown visible */
.DropDown:hover .Hide {
display: block;
position: absolute;
width: 100%;
text-align: center;
}
/* not sure what these two are for */

125
src/Header/Header.js
View File

@ -1,8 +1,5 @@
import logo from "./logo.png"; import logo from "./logo.png";
import DropdownMenu from "./DropdownMenu"; import { Outlet, Link } from "react-router-dom";
import OpenPageButton from "./OpenPageButton";
import { useNavigate, Outlet } from "react-router-dom";
import { useState } from "react";
import "./Header.css"; import "./Header.css";
/** /**
@ -13,72 +10,68 @@ import "./Header.css";
* @todo convert any dropdowns and use <Link> just like <a> https://github.com/Akshpreet02/EventSphere * @todo convert any dropdowns and use <Link> just like <a> https://github.com/Akshpreet02/EventSphere
*/ */
const Header = () => { const Header = () => {
const [isDropdownVisible, setDropdownVisible] = useState(false);
const navigate = useNavigate();
/**
* @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);
};
//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);
};
return ( return (
<> <>
<header> <header>
<figure> <Link to={"/"}>
<img <figure>
id="logo" <img
onClick={() => LinkTo("/")} id="logo"
src={logo} src={logo}
alt="Schulich Off-Road's logo" alt="Schulich Off-Road's logo"
/> />
<figcaption> <figcaption>
<h2>Schulich Offroad</h2> <h1>Schulich Offroad</h1>
</figcaption> </figcaption>
</figure> </figure>
</Link>
<nav> <nav>
<OpenPageButton <ul>
pageToGoTo={"/"} <Link to={"/"}>
textOnButton={"About Us"} <li>About Us</li>
/> </Link>
<OpenPageButton <Link to={"/Teams"}>
pageToGoTo={"/Teams"} <li>Teams</li>
textOnButton={"Teams"} </Link>
/> <Link to={"/OurSponsors"}>
<OpenPageButton <li>Our Sponsors</li>
pageToGoTo={"/OurSponsors"} </Link>
textOnButton={"Our Sponsors"} <Link to={"/OurSponsors"}>
/> <li>Become a Sponsor</li>
<OpenPageButton </Link>
pageToGoTo={"/BecomeASponsor"} <li className="DropDown">
textOnButton={"Become a Sponsor"} {/* this link and li only exits for styling purposes */}
/> <Link>
<div <li>Club Membership & Upcoming Events</li>
onMouseEnter={handleMouseEnter} </Link>
onMouseLeave={handleMouseLeave}
style={{ background: "red" }}> <ul className="Hide">
{/* dropdown menu is only visible when a mouse enters the area of the button below */} <Link to={"/JoinTheClub"}>
<button type="button">Club Membership & Upcoming Events</button>{" "} <li>Join the Club</li>
{/*this button does nothing yet*/} </Link>
{isDropdownVisible && <DropdownMenu />} <Link to={"/UpcomingEvents"}>
</div> <li>Upcoming Events</li>
<OpenPageButton </Link>
pageToGoTo={"/Gallery"} <Link>
textOnButton={"Gallery"} <li>Previous Events</li>
/> </Link>
</ul>
</li>
<li className="DropDown">
<Link>
<li>More</li>
</Link>
<ul className="Hide">
<Link>
<li>Gallery</li>
</Link>
<Link>
<li>Roster</li>
</Link>
</ul>
</li>
</ul>
</nav> </nav>
</header> </header>
<Outlet /> <Outlet />