mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-16 05:44:17 -06:00
feat(header): make it so that header can take in components for the banner, naviagtion and header changed to v3
This commit is contained in:
parent
41f37128ed
commit
138fb88ce6
@ -3,12 +3,11 @@ header {
|
||||
flex-direction: row;
|
||||
margin: 1%;
|
||||
margin-top: 1svh;
|
||||
padding-right: 0.5svw;
|
||||
|
||||
align-items: center;
|
||||
|
||||
/* background-color: aqua; */
|
||||
|
||||
/* background-image: url(); */
|
||||
justify-content: space-between;
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
|
||||
header a {
|
||||
@ -17,15 +16,36 @@ header a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header div button {
|
||||
cursor: pointer;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
justify-content: end;
|
||||
background-color: inherit;
|
||||
border: solid 2px gray;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
header div button img {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
header div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#logo {
|
||||
height: 10svh;
|
||||
/* background-color: white; */
|
||||
|
||||
padding: 0.15rem;
|
||||
}
|
||||
|
||||
/* naviagation section */
|
||||
|
||||
/* determines spacing and total amount of page it takes up*/
|
||||
nav {
|
||||
padding-left: 1svw;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
nav a {
|
||||
@ -37,9 +57,10 @@ nav a {
|
||||
nav a li {
|
||||
background-color: white;
|
||||
padding: 0.5rem;
|
||||
border-left: solid 1px gray;
|
||||
/* border-left: solid 2px gray; */
|
||||
}
|
||||
|
||||
/* removes first divider */
|
||||
/* can be removed if no borders from above */
|
||||
#FirstNav {
|
||||
border-left: none;
|
||||
}
|
||||
@ -51,10 +72,13 @@ nav a li:hover {
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
creates dwon downs
|
||||
/* */
|
||||
/* makes it so that the tags look the same whist having removing browser error */
|
||||
.DropDownHeader {
|
||||
display: inline-block;
|
||||
@ -87,31 +111,50 @@ nav ul {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
header div button {
|
||||
cursor: pointer;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
justify-content: end;
|
||||
background-color: inherit;
|
||||
border: solid 2px gray;
|
||||
border-radius: 1rem;
|
||||
/* For Banner */
|
||||
|
||||
#BannerHeader {
|
||||
height: 100svh;
|
||||
width: 100%;
|
||||
|
||||
/* bebug border, use margin to advantage, may cause error later */
|
||||
/* border-bottom: solid 1px black; */
|
||||
}
|
||||
|
||||
header div button img {
|
||||
height: 2rem;
|
||||
#BannerHeader img {
|
||||
position: absolute;
|
||||
height: 100svh;
|
||||
width: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
header div {
|
||||
#BannerHeader h1 {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width: fit-content;
|
||||
|
||||
margin-left: 3svw;
|
||||
|
||||
font-size: xx-large;
|
||||
font-weight: normal;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#BannerHeader h2 {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
|
||||
margin-left: 3svw;
|
||||
|
||||
font-size: xx-large;
|
||||
font-weight: normal;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* for dark mode */
|
||||
|
||||
@ -3,15 +3,26 @@ import lightDark from "./light-dark.webp";
|
||||
import { Outlet, Link } from "react-router-dom";
|
||||
import "./Header.css";
|
||||
import Ender from "../Footer/Ender";
|
||||
import { useEffect } from "react";
|
||||
|
||||
/**
|
||||
* @param {null} null - Takes in nothing
|
||||
* @param {String} titleText - The text to dispaly in the
|
||||
* @param {String} subtitleText - The text below the banner text you want
|
||||
* @param {String} imgUrl - The url to the image you want as the banner, by default this will be a lorem picsum
|
||||
* @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>
|
||||
* @todo add appropriate links
|
||||
*/
|
||||
export default function Header(props) {
|
||||
export default function Header({
|
||||
titleText = "UCalgary Baja",
|
||||
subtitleText = "Hello",
|
||||
imgUrl = "https://picsum.photos/200",
|
||||
}) {
|
||||
useEffect(() => {
|
||||
HeaderBannerHeight();
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {null} null - Takes in nothing
|
||||
* @returns {CSSStyleRule} CSS - changes page to darkmode
|
||||
@ -41,6 +52,31 @@ export default function Header(props) {
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {null} nothing - This takes in nothing
|
||||
* @returns {null} nothing - This returns nothing
|
||||
* @description This makes it so that the banner will always be 100% of the page at the top
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
*/
|
||||
const HeaderBannerHeight = () => {
|
||||
if (titleText === "" && imgUrl === "") {
|
||||
// return early to avoid error when no banner is desired
|
||||
return;
|
||||
}
|
||||
const headerTop = document.getElementsByTagName("header")[0];
|
||||
const headerTopStyle = getComputedStyle(headerTop);
|
||||
const headerTopInnerHeight = headerTop.offsetHeight;
|
||||
const headerTopMarginTop = parseFloat(headerTopStyle.marginTop);
|
||||
const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom);
|
||||
|
||||
const headerTopTotalHeight =
|
||||
headerTopInnerHeight + headerTopMarginHeight + headerTopMarginTop;
|
||||
|
||||
const HomeBannerTop = document.getElementById("BannerHeader");
|
||||
// 1svh is to gget the div close enough to the image
|
||||
HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px - 1svh)`;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
@ -68,9 +104,9 @@ export default function Header(props) {
|
||||
<Link to={"/OurSponsors"}>
|
||||
<li>Sponsors</li>
|
||||
</Link>
|
||||
<Link to={"/OurSponsors"}>
|
||||
{/* <Link to={"/OurSponsors"}>
|
||||
<li>Become a Sponsor</li>
|
||||
</Link>
|
||||
</Link> */}
|
||||
{/* Removed as no longer needed */}
|
||||
{/* <li className="DropDown">
|
||||
{/* this link and li only exits for styling purposes }
|
||||
@ -116,8 +152,49 @@ export default function Header(props) {
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
{titleText === "" && imgUrl === "" ? (
|
||||
<></>
|
||||
) : (
|
||||
<div id="BannerHeader">
|
||||
<img
|
||||
id="temp"
|
||||
src={imgUrl}
|
||||
/>
|
||||
<h1>{titleText}</h1>
|
||||
<h2>{subtitleText}</h2>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Outlet />
|
||||
<Ender />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// used like this
|
||||
// import { useState, useEffect } from 'react';
|
||||
|
||||
// const ChildPage = () => {
|
||||
// // You can modify the banner's content dynamically here
|
||||
// const [bannerInfo, setBannerInfo] = useState({
|
||||
// imgUrl: 'default-image-url.jpg',
|
||||
// text: 'Default Banner Text',
|
||||
// });
|
||||
|
||||
// useEffect(() => {
|
||||
// // Here, you could fetch data or dynamically set the image/text
|
||||
// setBannerInfo({
|
||||
// imgUrl: 'new-banner-image.jpg',
|
||||
// text: 'New Banner Text for this Page',
|
||||
// });
|
||||
// }, []); // This will set it when the component mounts
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// <h2>Child Page Content</h2>
|
||||
// {/* Other child content goes here */}
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default ChildPage;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user