From 10fc1f535bc5e2dbd5b0f9d4785de3796cf5c8d9 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Tue, 26 Mar 2024 13:53:52 -0600 Subject: [PATCH 1/7] added heaer: todos and where to find help --- src/Header/DropdownMenu.js | 1 + src/Header/Header.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/Header/DropdownMenu.js b/src/Header/DropdownMenu.js index dca3cb8..7be9405 100644 --- a/src/Header/DropdownMenu.js +++ b/src/Header/DropdownMenu.js @@ -5,6 +5,7 @@ import OpenPageButton from "./OpenPageButton"; * @returns {JSX.Element} JSX - HTML tags and JS functionality * @description Drop down menu elements * @author Brock + * @todo chang to proper drop down menu, convert to using */ const DropdownMenu = () => { return ( diff --git a/src/Header/Header.js b/src/Header/Header.js index 2b2714e..56f8327 100644 --- a/src/Header/Header.js +++ b/src/Header/Header.js @@ -10,6 +10,7 @@ import "./Header.css"; * @returns {JSX.Element} JSX - HTML tags and JS functionality * @description The top header part of the page includes the naviagtion * @author Brock + * @todo convert any dropdowns and use just like https://github.com/Akshpreet02/EventSphere */ const Header = () => { const [isDropdownVisible, setDropdownVisible] = useState(false); From 9280dcee835e817aed593fb6e66939abd4f73535 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Tue, 26 Mar 2024 15:23:43 -0600 Subject: [PATCH 2/7] added header: css started to make dropdowns better, now using Link --- src/Header/Header.css | 47 +++++++++++++--- src/Header/Header.js | 125 ++++++++++++++++++++---------------------- 2 files changed, 99 insertions(+), 73 deletions(-) diff --git a/src/Header/Header.css b/src/Header/Header.css index 9b9e44b..cc86553 100644 --- a/src/Header/Header.css +++ b/src/Header/Header.css @@ -5,6 +5,12 @@ header { margin-top: 0%; } +header a { + text-decoration: none; + color: inherit; + cursor: pointer; +} + figure { margin: 0px; height: 10%; @@ -15,14 +21,41 @@ figure { background-color: white; } -/* not sure what these two are for */ -#title { - background-color: blueviolet; +nav a { + text-decoration: none; + color: inherit; + cursor: pointer; } -.banner { + +nav a li { + background-color: none; + padding: 1rem; + padding-top: 0px; +} + +nav ul { display: flex; flex-direction: row; - align-items: center; - justify-content: flex-start; - background-color: aqua; + list-style: none; + margin: 0px; + 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 */ diff --git a/src/Header/Header.js b/src/Header/Header.js index 56f8327..d25559b 100644 --- a/src/Header/Header.js +++ b/src/Header/Header.js @@ -1,8 +1,5 @@ import logo from "./logo.png"; -import DropdownMenu from "./DropdownMenu"; -import OpenPageButton from "./OpenPageButton"; -import { useNavigate, Outlet } from "react-router-dom"; -import { useState } from "react"; +import { Outlet, Link } from "react-router-dom"; import "./Header.css"; /** @@ -13,72 +10,68 @@ import "./Header.css"; * @todo convert any dropdowns and use just like https://github.com/Akshpreet02/EventSphere */ 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 - */ - 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 ( <>
-
- LinkTo("/")} - src={logo} - alt="Schulich Off-Road's logo" - /> -
-

Schulich Offroad

-
-
+ +
+ +
+

Schulich Offroad

+
+
+ +
From 58f2ad739c5e7df528550de5e7b055a0f85e7229 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Tue, 26 Mar 2024 22:32:28 -0600 Subject: [PATCH 3/7] added header: added dark mode css and togglable dark/light mode and checks for browser preferance --- src/Header/Header.css | 44 ++++++++++++++++++++++++-- src/Header/Header.js | 62 ++++++++++++++++++++++++++++++------- src/Header/light-dark.webp | Bin 0 -> 6090 bytes src/index.css | 22 ++++++++----- 4 files changed, 105 insertions(+), 23 deletions(-) create mode 100644 src/Header/light-dark.webp diff --git a/src/Header/Header.css b/src/Header/Header.css index cc86553..73d24ef 100644 --- a/src/Header/Header.css +++ b/src/Header/Header.css @@ -29,8 +29,12 @@ nav a { nav a li { background-color: none; - padding: 1rem; - padding-top: 0px; + padding: 0.5rem; + border: solid 1px gray; +} + +nav a li:hover { + background-color: gray; } nav ul { @@ -58,4 +62,38 @@ nav ul { text-align: center; } -/* not sure what these two are for */ +header div { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +header div button { + border: none; + cursor: pointer; + height: 4rem; + width: 4rem; + align-items: center; + background-color: inherit; + border: solid 2px gray; + border-radius: 1rem; +} + +header div button img { + width: 100%; +} + +/* for dark mode */ + +.darkmode { + filter: invert(95%) hue-rotate(180deg); + background-color: white; +} + +#root.darkmode #logo.logoAfterDark { + filter: hue-rotate(180deg); +} + +#root.darkmode #darkModeToggle { + filter: hue-rotate(180deg); +} diff --git a/src/Header/Header.js b/src/Header/Header.js index d25559b..e0b81d0 100644 --- a/src/Header/Header.js +++ b/src/Header/Header.js @@ -1,4 +1,5 @@ import logo from "./logo.png"; +import lightDark from "./light-dark.webp"; import { Outlet, Link } from "react-router-dom"; import "./Header.css"; @@ -7,25 +8,62 @@ import "./Header.css"; * @returns {JSX.Element} JSX - HTML tags and JS functionality * @description The top header part of the page includes the naviagtion * @author Brock - * @todo convert any dropdowns and use just like https://github.com/Akshpreet02/EventSphere + * @todo final css */ const Header = () => { + /** + * @param {null} null - Takes in nothing + * @returns {CSSStyleRule} CSS - changes page to darkmode + * @description inverts all of the colors of body without touching the pictures + * @author Brock + */ + const switchDarkMode = () => { + const body = document.getElementById("root"); + const logoCss = document.getElementById("logo"); + + body.classList.toggle("darkmode"); + logoCss.classList.toggle("logoAfterDark"); + }; + + /** + * @param {null} null - Takes in nothing + * @returns {CSSStyleRule} CSS - makes it compliant with bowser preferances + * @description checks for what the browser prefers + * @author Brock + */ + document.addEventListener("DOMContentLoaded", () => { + const prefersDarkMode = + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches; + if (prefersDarkMode) { + switchDarkMode(); + } + }); + return ( <>
- -
+
+ +
+ +
+

Schulich Offroad

+
+
+ +
- - + +