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

feat(header): Naviagtion/header setup, need to add banner image to each one

Browse Source
This commit is contained in:
darkicewolf50 2025-03-15 14:09:45 -06:00
parent ba2e01aad8
commit 41f37128ed
3 changed files with 70 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/Header/Header.css
View File

@ -1,8 +1,14 @@
header { header {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
margin: 1%; margin: 1%;
margin-top: 0%; margin-top: 1svh;
align-items: center;
/* background-color: aqua; */
/* background-image: url(); */
} }
header a { header a {
@ -11,18 +17,15 @@ header a {
cursor: pointer; cursor: pointer;
} }
figure {
margin: 0px;
height: 10%;
}
header figure {
cursor: pointer;
}
#logo { #logo {
height: 5rem; height: 10svh;
background-color: white; /* background-color: white; */
padding: 0.15rem;
}
nav {
padding-left: 1svw;
} }
nav a { nav a {
@ -34,7 +37,11 @@ nav a {
nav a li { nav a li {
background-color: white; background-color: white;
padding: 0.5rem; padding: 0.5rem;
border: solid 1px gray; border-left: solid 1px gray;
}
#FirstNav {
border-left: none;
} }
nav a li:hover { nav a li:hover {
@ -87,18 +94,24 @@ header div {
align-items: center; align-items: center;
} }
header div button { header div button {
border: none;
cursor: pointer; cursor: pointer;
height: 4rem; height: 3rem;
width: 4rem; width: 3rem;
align-items: center; justify-content: end;
background-color: inherit; background-color: inherit;
border: solid 2px gray; border: solid 2px gray;
border-radius: 1rem; border-radius: 1rem;
} }
header div button img { header div button img {
width: 100%; height: 2rem;
}
header div {
display: flex;
justify-content: flex-end;
align-items: center;
flex-grow: 1;
} }
/* for dark mode */ /* for dark mode */

73
src/Header/Header.js
View File

@ -1,4 +1,4 @@
import logo from "./logo.webp"; import logo from "./logo.png";
import lightDark from "./light-dark.webp"; import lightDark from "./light-dark.webp";
import { Outlet, Link } from "react-router-dom"; import { Outlet, Link } from "react-router-dom";
import "./Header.css"; import "./Header.css";
@ -9,9 +9,9 @@ import Ender from "../Footer/Ender";
* @returns {JSX.Element} JSX - HTML tags and JS functionality * @returns {JSX.Element} JSX - HTML tags and JS functionality
* @description The top header part of the page includes the naviagtion * @description The top header part of the page includes the naviagtion
* @author Brock <darkicewolf50@gmail.com> * @author Brock <darkicewolf50@gmail.com>
* @todo final css add baja but eon (baja leads chat) * @todo add appropriate links
*/ */
const Header = () => { export default function Header(props) {
/** /**
* @param {null} null - Takes in nothing * @param {null} null - Takes in nothing
* @returns {CSSStyleRule} CSS - changes page to darkmode * @returns {CSSStyleRule} CSS - changes page to darkmode
@ -44,43 +44,36 @@ const Header = () => {
return ( return (
<> <>
<header> <header>
<div> <Link to={"/"}>
<Link to={"/"}> <img
<figure> id="logo"
<img src={logo}
id="logo" alt="Schulich Off-Road's logo"
src={logo} />
alt="Schulich Off-Road's logo" </Link>
/>
<figcaption>
<h1>Schulich Offroad</h1>
</figcaption>
</figure>
</Link>
<button onClick={switchDarkMode}>
<img
id="darkModeToggle"
src={lightDark}
alt="Light/Dark Toggle Symbol"
/>
</button>
</div>
<nav> <nav>
<ul> <ul>
<Link to={"/"}> <Link to={"/"}>
<li>About Us</li> <li id="FirstNav">Home</li>
</Link>
<Link to={"/"}>
<li>About</li>
</Link> </Link>
<Link to={"/Teams"}> <Link to={"/Teams"}>
<li>Teams</li> <li>Team</li>
</Link>
<Link to={"/"}>
<li>History</li>
</Link> </Link>
<Link to={"/OurSponsors"}> <Link to={"/OurSponsors"}>
<li>Our Sponsors</li> <li>Sponsors</li>
</Link> </Link>
<Link to={"/OurSponsors"}> <Link to={"/OurSponsors"}>
<li>Become a Sponsor</li> <li>Become a Sponsor</li>
</Link> </Link>
<li className="DropDown"> {/* Removed as no longer needed */}
{/* this link and li only exits for styling purposes */} {/* <li className="DropDown">
{/* this link and li only exits for styling purposes }
<Link className="DropDownHeader"> <Link className="DropDownHeader">
Club Membership & Upcoming Events Club Membership & Upcoming Events
</Link> </Link>
@ -96,8 +89,8 @@ const Header = () => {
<li>Previous Events</li> <li>Previous Events</li>
</Link> </Link>
</ul> </ul>
</li> </li> */}
<li className="DropDown"> {/* <li className="DropDown">
<Link className="DropDownHeader">More...</Link> <Link className="DropDownHeader">More...</Link>
<ul className="Hide"> <ul className="Hide">
<Link to={"/Gallery"}> <Link to={"/Gallery"}>
@ -107,14 +100,24 @@ const Header = () => {
<li>Roster</li> <li>Roster</li>
</Link> </Link>
</ul> </ul>
</li> </li> */}
<Link to={"/"}>
<li>Contact Us</li>
</Link>
</ul> </ul>
</nav> </nav>
<div>
<button onClick={switchDarkMode}>
<img
id="darkModeToggle"
src={lightDark}
alt="Light/Dark Toggle Symbol"
/>
</button>
</div>
</header> </header>
<Outlet /> <Outlet />
<Ender /> <Ender />
</> </>
); );
}; }
export default Header;

BIN
src/Header/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 37 KiB